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

.mypage__nav {
  @include transition(border-radius);

  flex-shrink: 0;
  overflow: hidden;
  padding: 0.8rem;
  width: 26rem;
  border-radius: 1.2rem;
  border: 1px solid theme-color($border-low);
  background-color: theme-color($container);

  &.active {
    .mypage__nav-btn {
      &::after {
        rotate: -180deg;
      }
    }

    .mypage__nav-menu {
      opacity: 1;
      visibility: visible;
      border-radius: 0 0 0.4rem 0.4rem;
      max-height: 32rem;
    }
  }

  @include media("lg") {
    overflow: visible;
    flex: none;
    position: relative;
    padding: 0;
    border-radius: 0.8rem;
    width: 100%;

    &.active {
      border-radius: 0.8rem 0.8rem 0 0;
    }
  }

  &-menu {
    @include media("lg") {
      position: absolute;
      top: 100%;
      left: -1px;
      z-index: 1;
      width: calc(100% + 2px);
      border: 1px solid theme-color($border-low);
      border-top: none;
      border-radius: 0.8rem;

      [data-theme="dark"] & {
        background-color: #221a25;
      }

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

  &-link {
    @include typography("h6");
    @include flexCenter(flex-start);
    @include transition((border, background, color, font-weight));

    overflow: hidden;
    gap: 0.4rem;
    padding: 0 1.6rem;
    height: 4.8rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;

    @include media("lg") {
      padding: 0 1.2rem;
    }

    &.active {
      background-color: theme-color($primary);
      font-weight: 700;

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

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

      &::before {
        filter: invert(1);
      }
    }

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

  &-title {
    display: none;

    @include media("lg") {
      display: flex;
    }
  }

  &-btn {
    @include typography("h6");
    @include flexCenter(flex-start);

    gap: 0.4rem;
    position: relative;
    padding: 0 1.2rem;
    width: 100%;
    height: 4.8rem;
    background: transparent;
    color: theme-color($text-high);
    border: none;

    &.ico-after::after {
      position: absolute;
      right: 1.2rem;
      width: 2rem;
      height: 2rem;
    }
    i[class*="ico-"]:not(.ico-before):not(.ico-after) {
      --ico-size: 2rem;
    }
  }
}