@use '../abstracts/mixins' as *;

.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-5);
    height: var(--topbar-height);
    position: sticky;
    top: 0;
    z-index: 30;

    &__menu {
        display: none;
        background: transparent;
        border: 0;
        color: var(--color-text);
        padding: var(--space-2);
        border-radius: var(--radius-sm);

        @include media-down(lg) { display: inline-flex; }
        &:hover { background: var(--color-surface-alt); }
    }

    &__search {
        flex: 1;
        max-width: 480px;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-pill);
        color: var(--color-text-muted);
        cursor: pointer;

        &:hover { background: var(--color-bg); color: var(--color-text); }
        &-hint { margin-left: auto; }
    }

    &__spacer { flex: 1; }

    &__actions { display: inline-flex; align-items: center; gap: var(--space-2); }

    &__icon-btn {
        position: relative;
        width: 2.25rem; height: 2.25rem;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: var(--radius-md);
        background: transparent;
        border: 1px solid transparent;
        color: var(--color-text);
        cursor: pointer;

        &:hover { background: var(--color-surface-alt); }

        &-dot {
            position: absolute;
            top: 8px; right: 9px;
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--color-danger);
            border: 2px solid var(--color-surface);
        }
    }

    [data-theme='dark'] &__theme [data-when-theme='dark'] { display: none; }
    [data-theme='dark'] &__theme [data-when-theme='light'] { display: inline-flex; }
    &__theme [data-when-theme='dark']  { display: inline-flex; }
    &__theme [data-when-theme='light'] { display: none; }
}