.pricing {
  &.section {
  }
  &__plan-btns {
    @extend %d-flex, %item-center, %p-relative;
    border-radius: 500px;
    background: $color-2;
    backdrop-filter: blur(20px);
    padding: 3px;
    z-index: 1;
    user-select: none;

    input {
      font-size: 0;
      font-size: 0;
      width: 0;
      height: 0;
      line-height: 0;
      visibility: hidden;
    }
    [type="radio"]:checked#price-monthly
      + label[for="price-yearly"]
      ~ .highlighter {
      transform: none;
    }
    [type="radio"]:checked#price-yearly
      + label[for="price-monthly"]
      ~ .highlighter {
      transform: translateX(100%);
    }
    .pricing-btn {
      border: none;
      background-color: transparent;
      color: $color-white;
      border-radius: 500px;
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      line-height: 1;
      padding: 16px 15px;
      min-width: 130px;
      cursor: pointer;
      @include transition($transition);

      &.active {
        color: $color-1;
      }
    }
    .highlighter {
      @extend %p-absolute, %d-inline-block;
      width: calc((100% - 6px) / 2);
      height: calc(100% - 6px);
      background-color: $color-primary;
      z-index: -1;
      @include transition($transition);
      border-radius: 500px;
    }
  }
  &__box {
    border-radius: 14px;
    border: 1px solid rgba($color-white, 0.1);
    padding: 40px;

    @include breakpoint(max-lg) {
      padding: 30px;
    }
    @include breakpoint(max-md) {
      padding: 20px;
    }

    .pricing-header {
      .plan-name,
      .plan-type {
        color: $color-white;
        line-height: 1;
      }
      .plan-price {
        line-height: 1;
        padding-block: 20px;

        @include breakpoint(max-md) {
          padding-block: 15px;
        }

        span {
          &:nth-child(2) {
            display: none;
          }
        }
      }
      .plan-type {
        span {
          &:nth-child(2) {
            display: none;
          }
        }
      }
    }
    .pricing-body {
      margin-top: 40px;
      @include breakpoint(max-md) {
        margin-top: 30px;
      }
      .package-features {
        border-top: 1px solid rgba($color-white, 0.1);
        padding-top: 25px;

        ul {
          li {
            @extend %d-flex, %item-center;
            line-height: 1;
            gap: 10px;

            &:not(:last-of-type) {
              margin-bottom: 15px;

              @include breakpoint(max-md) {
                margin-bottom: 10px;
              }
            }

            &::before {
              font: var(--fa-font-solid);
              content: "\f058";
            }
          }
        }
      }

      a {
        margin-top: 40px;
        color: $color-white;
        border-color: $color-white;
        background-color: transparent;

        @include breakpoint(max-md) {
          margin-top: 35px;
        }

        &:hover,
        &.active {
          color: $color-1;
          border-color: $color-primary;
          background-color: $color-primary;
        }
      }
    }

    &.hover,
    &.active {
      .pricing-body {
        a {
          color: $color-1;
          border-color: $color-primary;
          background-color: $color-primary;
        }
      }
    }

    &.price-yearly {
      .pricing-header {
        .plan-price,
        .plan-type {
          span {
            &:nth-child(1) {
              display: none;
            }
            &:nth-child(2) {
              @extend %d-inline-block;
            }
          }
        }
      }
    }
  }
}
