// Variables & Mixins
@import "../../../../themes/everse/assets/sass/base/_variables";
@import "../../../../themes/everse/assets/sass/base/_mixins.scss";

/*-------------------------------------------------------*/
/* Pricing Tables
/*-------------------------------------------------------*/
.pricing {
  background-color: #fff;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 3px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
  top: 0;
  border: 2px solid lighten($border-color, 3%);
  @include transition ($transition-all);

  &:hover,
  &--best {
    box-shadow: 0px 25px 36px 0px rgba( #9aa1ab, .24 );
    z-index: 2;
    top: -20px;
  }

  @include bp-lg-down {
    &--best {
      top: 0;
    }
  }

  &--best {
    .pricing__title,
    .pricing__price,
    .pricing__currency {
      color: #fff;
    } 
    
    .pricing__header {
      background-color: $primary-color;
    }

    .pricing__body {
      padding-bottom: 60px;
    }
  }
  
  &__title {
    font-size: 1.5rem;
    margin-bottom: 14px;
  }

  &__header {
    color: $heading-color;
    background-color: $bg-light;
    position: relative;
    top: -2px;
    left: -2px;
    width: calc( 100% + 4px );
    padding: 20px;
  }

  &__currency {
    display: inline-block;
    vertical-align: top;
    margin-right: 2px;
    font-size: 1.5rem;
    font-family: $heading-font;
    font-weight: 700;
  }

  &__price {
    font-size: 3rem;    
    font-weight: 700;
    font-family: $heading-font;
    line-height: 1;
  }

  &__term {
    font-size: 0.8125rem;
    display: block;
    color: $text-color;
    font-family: $body-font;
  }

  &__body {
    padding: 40px;
  }

  &__text {
    margin-bottom: 0;
    margin: 0 auto;
    max-width: 220px;
  }

  &__features {
    text-align: left;
    font-size: 0.9375rem;
    margin-top: 40px;

    &-list {
      list-style: none;
    }

    li {
      padding-left: 20px;
      position: relative;

      &:not(:last-child) {
        margin-bottom: 7px;
      }
    }
  }
}

.secondary-pricing {
  display: none;
}

.eversor-toggle {
  margin-bottom: 80px;

  &__switch {
    @include display-flex;
  }

  &__button {
    background-color: #fff;
    text-transform: none;
    min-width: 97px;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: $heading-color;
    text-align: center;
    cursor: pointer;
    padding: 10px 17px;
    border-radius: 3px 0 0 3px;
    border: 1px solid lighten($border-color, 3%);
    @include transition($transition-all);

    &:last-child {
      border-radius: 0 3px 3px 0; 
    }

    &--is-active,
    &:hover {
      background-color: $primary-color;
      border-color: transparent;
      color: #fff;
    }
  }
}