@use "../base/mixins";
@use "../vars/variables";

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--uc-navbar-height);
  width: calc(100vw - 2.5rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--uc-black);
  gap: 2rem;
  padding: 1.25rem;
  z-index: 1100;
  box-sizing: content-box;

  @media screen and (max-width: variables.$bp-laptop) {
    padding: 0.3125rem 2.5rem 0.3125rem 0.625rem;
    width: calc(100vw - 3.125rem);
  }

  &--subpage {
    .navbar {
      &__col {
        &--left {
          @media screen and (max-width: variables.$bp-laptop) {
            display: none;
          }
        }

        &--center {
          @media screen and (max-width: variables.$bp-laptop) {
            margin-left: 0;
          }
        }
      }
    }
  }

  &--in-background {
    @media screen and (max-width: variables.$bp-laptop) {
      opacity: 0.2;
      cursor: default;
      pointer-events: none;
      transition: opacity 0.2s;
    }
  }

  &__col {
    &--left {
      .logo {
        margin-top: 0.25rem;
      }
    }

    &--center {
      display: flex;
      height: var(--uc-navbar-height);
      margin-left: -1.56rem;
    }

    &--right {
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: 1rem;

      &__desktop-dropdown {
        @media screen and (max-width: variables.$bp-laptop) {
          display: none;
        }
      }
    }
  }

  &__notification-wrapper {
    position: relative;
    min-width: 3.125rem;
    margin-right: 0.62rem;

    @media screen and (max-width: variables.$bp-laptop) {
      min-width: 0;
      margin-right: 0;
    }
  }

  &__page-name {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;

    .button {
      max-width: 2rem;
    }

    &__text {
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;

      @include mixins.heading-4;

      @media screen and (max-width: variables.$bp-tablet) {
        font-size: 1rem;
      }

      & {
        color: var(--uc-text-text-primary);
      }
    }
  }

  &__settings-menu {
    display: flex;
    align-items: center;
    gap: 1rem;

    @media screen and (max-width: variables.$bp-phone) {
      gap: 0.375rem;
    }

    .v-select {
      flex: 1;
    }

    .vs__dropdown-toggle {
      background: var(--uc-theme-color-30);

      .vs__selected {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @media (pointer: fine) {
        &:hover {
          color: var(--uc-white);
          background: var(--uc-theme-color-40);

          .vs__selected {
            color: var(--uc-white);
          }

          .vs__actions::after {
            color: var(--uc-white);
          }
        }
      }
    }
  }
}