@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/tools/v7/typography' as * ;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;

$radius: 3rem;

@keyframes selection {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}

@keyframes popup {
  0% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0%);
  }
}

.c-switcher {
  &__options {
    background-color: var(--background-color-gray);
    border-radius: #{$radius};
  }
  &__option{
    & {
      transition: font-weight .3s ease-in;
      width: fit-content;
      &::after{
        content: '';
        position: absolute;
        bottom: 50%;
        left: 50%;
        translate: -50% 50%;
        width: 40px;
        height: 40px;
        opacity: 0;
        border-radius: #{$radius};
        background-color: var(--background-color);
        @include z(underneath);
      }
    }
    @include type(label-11);
  }

  input[value="month"]:checked ~ .c-switcher__options > .c-switcher__option[data-option-value="month"],
  input[value="year"]:checked ~ .c-switcher__options > .c-switcher__option[data-option-value="year"],
  input[value="other"]:checked ~ .c-switcher__options > .c-switcher__option[data-option-value="other"] {
    &::after{
      animation: selection 0.6s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
    }
    @include type(label-04);
  }

  &__label {
    background-color: $color-green;
    top: -1rem;
    right: 1rem;
  }

  input[value="month"]:checked ~ .c-switcher__panel[data-time="month"],
  input[value="year"]:checked ~ .c-switcher__panel[data-time="year"],
  input[value="other"]:checked ~ .c-switcher__panel[data-time="other"] {
    height: auto;
    opacity: 1;
    display: block;
    > * {
      animation: popup .6s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
    }
  }

  &__panel {
    height: 0;
    opacity: 0;
    transition: height .9s ease-in-out, display .3s ease-in-out allow-discrete;
    overflow-y: hidden;
    display: none;
  }
}