@keyframes tab-on {
  0% {
    inline-size: 0%;
  }

  100% {
    inline-size: 100%;
  }
}

@keyframes tab-off {
  0% {
    inline-size: 100%;
  }

  100% {
    inline-size: 0%;
  }
}

.account-panel {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-7);

  inline-size: 100%;
  max-inline-size: 20rem;

  @include media-down(tablet-xs) {
    gap: $whitespace-10;
    align-items: center;
    max-inline-size: none;
  }

  &__tab-container {
    @include media-down(tablet-xs) {
      flex: 1;
      inline-size: 100%;
    }
  }

  &__avatar-wrapper {
    @include size(7.5rem, 7.5rem);

    position: relative;

    @include media-down(tablet-xs) {
      @include size(10rem, 10rem);
    }
  }

  &__avatar,
  &__avatar-loader {
    @include size(100%, 100%);

    cursor: pointer;
    object-fit: cover;
    object-position: center;
  }

  &__avatar-icon {
    @include position(absolute, auto, 0, 0, auto);
    @include size(2.5rem, 2.5rem);

    padding: $whitespace-2;
    color: $color-neutral-1;
    cursor: pointer;
    background-color: $color-neutral-10;
  }

  &__tab-list {
    @include remove-list-styles;
    @include flex(column, nowrap, $whitespace-7);

    @include media-down(tablet-xs) {
      flex-direction: row;
      gap: $whitespace-4;
      justify-content: space-between;
      inline-size: 100%;
    }

    @include media-down(mobile-m) {
      font-size: $font-size-3;
    }
  }

  &__tab-list-item {
    display: block;
  }

  &__tab {
    @include remove-link-styles;
    @include remove-button-styles;

    position: relative;
    inline-size: 100%;
    padding-block-end: $whitespace-4;
    font-weight: $font-weight-semi-bold;
    color: $color-neutral-7;

    @media (prefers-reduced-motion: no-preference) {
      transition: all 0.15s;
      animation: nav-off 450ms cubic-bezier(0.19, 1, 0.22, 1) 0s forwards;
    }

    &:hover {
      @media (hover: hover) {
        color: $color-neutral-10;
      }
    }

    &::after {
      @include position(absolute, auto, 0, -($whitespace-3), auto);
      @include size(0.2rem, 0);

      display: block;
      content: "";
      background-color: $color-neutral-10;

      @media (prefers-reduced-motion: no-preference) {
        animation: tab-off 450ms cubic-bezier(0.19, 1, 0.22, 1) 0s forwards;
      }
    }

    &:hover::after {
      @media (hover: hover) {
        inset-inline: 0 auto;

        @media (prefers-reduced-motion: no-preference) {
          animation: tab-on 320ms cubic-bezier(0.19, 1, 0.22, 1) 0s forwards;
        }
      }
    }

    &--selected {
      color: $color-neutral-10;

      // border-block-end: 0.1rem solid $color-neutral-10;
    }
  }
}