@use "../base/mixins" as *;
@use "../base/variables" as *;
@use "../base/typography" as *;

.header {
  @include flexCenter(space-between);
  @include transition((background-color, backdrop-filter, padding));

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  margin: 0 auto;
  padding: 0 2.6rem 0 2.4rem;
  width: 100%;
  max-width: 1920px;
  height: 8.6rem;
  background: transparent;

  body:has(.chat--open, .notification-system--open) & {
    @media (min-width:993px) {
      padding-right: 37.6rem;
    }
  }

  @include media("lg") {
    padding: 1.4rem 1.6rem 1.4rem 1.2rem;
    height: 6rem;
  }

  &--active {
    backdrop-filter: blur(4rem);

    [data-theme="dark"] & {
      background-color: rgba(#090909, 0.2);
    }

    [data-theme="light"] & {
      background-color: rgba(#fff, 0.08);
    }
  }

  &__logo {
    a {
      @include transition(background);

      width: 12.2rem;
      height: 4rem;

      [data-theme="dark"] & {
        @include bg-image("@/assets/images/logo.svg", contain);
      }

      [data-theme="light"] & {
        @include bg-image("@/assets/images/logo_light.svg", contain);
      }

      @include media("lg") {
        width: 8rem;
        height: 2.6rem;
      }
    }
  }

  &__gnb {
    &-list {
      @include flexCenter();

      gap: 1.2rem;

      @include media("lg") {
        gap: 0.4rem;
      }
    }

    &-item {
      position: relative;
      display: flex;

      .btn-gray {
        [data-theme="light"] & {
          background-color: #fff;
        }
      }
    }

    &-credit {
      @include flexCenter(flex-start);

      position: relative;
      padding-left: 1.2rem;
      gap: 1.2rem;
      border-radius: 0.8rem;
      background-color: theme-color($container);

      @include media("lg") {
        border-radius: 0.6rem;
      }

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 0.8rem;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;

        [data-theme="dark"] & {
          background: linear-gradient(130deg,
              theme-color($primary) 0%,
              rgba(#fff, 0.15) 15%);
        }

        [data-theme="light"] & {
          background: linear-gradient(130deg, #07bf7c 0%, #fff 20%);
        }
      }

      [class*="btn-"] {
        position: relative;
        z-index: 1;
      }
    }

    &-credit-info {
      @include flexCenter(flex-start);

      gap: 0.8rem;

      @include media("lg") {
        gap: 0.4rem;
      }

      i {
        flex-shrink: 0;
      }

      span {
        @include typography("p2");

        color: theme-color($text-high);
        font-weight: 500;
      }
    }

    [class*="btn-ghost"] {
      padding: 0 1rem !important;
    }

    [class*="btn-sm"] {
      border-radius: 0.8rem !important;

      @include media("lg") {
        border-radius: 0.6rem !important;
      }
    }

    &-theme {
      @include flexCenter();

      position: relative;
      gap: 0.4rem;

      &.btn-sm {
        padding: 0 !important;
      }

      &:hover {
        background-color: theme-color($invert-container) !important;
      }

      &::before {
        @include transition(all);

        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(50% + 1px);
        height: calc(100% + 1px);
        background-color: theme-color($border-low);
        border-radius: 0.8rem;
        border: 1px solid theme-color($border-low);
        pointer-events: none;
      }

      &:has(.btn-light.active) {
        &::before {
          left: 50%;
        }
      }

      button {
        @include flexCenter();

        width: 4rem;
        height: 100%;
        background: transparent;
        border: none;

        &.active {
          [data-theme="dark"] &::before {
            filter: brightness(0) invert(1);
          }

          [data-theme="light"] &::before {
            filter: brightness(0) invert(0);
          }
        }
      }
    }

    &-user {
      overflow: hidden;
      width: 4rem;
      height: 4rem;
      border-radius: 0.8rem;

      @include media("lg") {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 0.6rem;
      }

      img {
        @include img-fit();
      }

      &-menu {
        position: absolute;
        top: 100%;
        right: 0;
        translate: 0 0.4rem;
        padding: 0.6rem 0;
        width: max-content;
        background-color: theme-color($modal-bg);
        border-radius: 0.8rem;

        @include media("lg") {
          padding: 0.4rem 0;
          border-radius: 0.4rem;
        }

        &-list {
          display: flex;
          flex-direction: column;
        }

        &-item {
          position: relative;
          width: 100%;
        }

        &-link {
          @include flexCenter(flex-start);
          @include typography("p2");
          @include transition((color, background));

          gap: 0.4rem;
          padding: 0 0.8rem;
          width: 100%;
          min-width: 12.4rem;
          height: 3.2rem;
          background-color: transparent;
          color: theme-color($text-high);
          white-space: nowrap;

          &::before {
            --ico-size: 1.6rem;
          }

          &:has(i) {
            padding-right: 3rem;
          }

          @include media("lg") {
            height: 2.8rem;
          }

          &:hover,
          &.active {
            [data-theme="dark"] & {
              background-color: rgba(#fff, 0.2);
            }

            [data-theme="light"] & {
              background-color: #eef1f8;
            }
          }

          &--logout {
            [data-theme="dark"] & {
              border-top: 1px solid rgba(#fff, 0.2);
            }

            [data-theme="light"] & {
              border-top: 1px solid #eef1f8;
            }
          }

          &.active i {
            rotate: -180deg;
          }

          i {
            position: absolute;
            top: 50%;
            right: 0.8rem;
            translate: 0 -50%;
            pointer-events: none;

            &.ico-chevron-down {
              --ico-size: 1.6rem;
            }
          }
        }
      }

      &-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        translate: 0 0.4rem;
        padding: 0.6rem 0;
        width: 100%;
        border-radius: 0.8rem;
        background-color: theme-color($modal-bg);

        [data-theme="dark"] & {
          border: 1px solid #4d4d4d;
        }

        @include media("lg") {
          padding: 0.4rem 0;
          border-radius: 0.4rem;
        }

        &-link {
          @include flexCenter(flex-start);
          @include typography("p2");
          @include transition((color, background));

          gap: 0.4rem;
          padding: 0 0.8rem;
          width: 100%;
          min-width: 12.4rem;
          height: 3.2rem;
          background-color: transparent;
          color: theme-color($text-high);

          @include media("lg") {
            height: 2.8rem;
          }

          &:hover,
          &.active {
            [data-theme="dark"] & {
              background-color: rgba(#fff, 0.2);
            }

            [data-theme="light"] & {
              background-color: #eef1f8;
            }
          }
        }
      }
    }

    &-language {
      &::before {
        --ico-size: 2rem;
      }
    }

    &-sound {
      gap: 0.4rem;
      min-width: 6.9rem;
      color: theme-color($text-high) !important;
      font-size: 1.2rem !important;
      line-height: 1.8rem !important;
      font-weight: 500 !important;
    }
  }

  &__mobile-gnb {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    background-color: theme-color($container);
    border-radius: 1.2rem 1.2rem 0 0;
    backdrop-filter: blur(60px);

    &-list {
      @include flexCenter();
    }

    &-item {
      @include flexCenter();

      flex: 1;
      height: 8rem;
    }

    &-btn {
      @include flexCenter();
      @include transition(all);

      flex-direction: column;
      gap: 0.4rem;
      position: relative;
      padding: 0 1.2rem;
      width: 100%;
      font-weight: 600;
      text-align: center;
      background-color: transparent;
      border: none;

      &:hover {
        color: #40fab6 !important;
      }

      &--home:hover {
        &::before {
          @include bg-image("@/assets/icons/dark/ico_home_m_fill.svg",
            contain,
            true);
        }
      }

      &--jackpot:hover {
        &::before {
          @include bg-image("@/assets/icons/dark/ico_jackpot_m_fill.svg",
            contain,
            true);
        }
      }

      &--chat:hover {
        &::before {
          @include bg-image("@/assets/icons/dark/ico_chat_m_fill.svg",
            contain,
            true);
        }
      }

      &--bell:hover {
        &::before {
          @include bg-image("@/assets/icons/dark/ico_bell_m_fill.svg",
            contain,
            true);
        }
      }

      [data-theme="dark"] & {
        color: rgba(#fff, 0.6);
      }

      [data-theme="light"] & {
        color: #111;
      }
    }

    &-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2rem;

      &::before {
        content: "";
        width: 13.9rem;
        height: 0.5rem;
        background-color: theme-color($text-high);
        border-radius: 10rem;
      }
    }
  }
}

.notification {
  @include flexCenter();

  position: absolute;
  top: 0;
  right: 0;
  translate: 25% -25%;
  padding: 0 0.4rem;
  min-width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
  border-radius: 10rem;
  color: theme-color($border-high);
  background-color: theme-color($secondary);

  @include media("lg") {
    right: auto;
    left: 50%;
    translate: calc(-50% + 1rem) -30%;
    width: min-content;
  }

  &-overflow {
    @include media("lg") {
      left: 55%;
    }
  }
}