/**

   Requires custom bootstrap 4 compiled CSS:

   https://codepen.io/StudioKonKon/pen/QoLPPw
   https://codepen.io/StudioKonKon/pen/bZwqbZ

*/

$light-color: #fff;
$font-weight-light: 300;

$primary-color: #4285f4;
$danger-color: #ea4335;
$warning-color: #fbbc05;
$konkon-color: #fe669e;

$primary-color-text: $primary-color;
$danger-color-text: $danger-color;
$warning-color-text: $warning-color;

$pricing-table-border-radius: 3px;
$pricing-table-padding: 35px 20px;
$pricing-table-margin: 0 0 20px;
$pricing-table-value-size: 35px;
$pricing-table-price-line-height: 40px;
$pricing-table-frecuency-size: 1.538rem;
$pricing-table-fatures-line-height: 33px;
$pricing-table-button-height: 36px;
$pricing-table-button-min-width: 120px;

.pricing-content {
   margin: 40px auto;

   > h1 {
      font-weight: 100;
      margin-bottom: 20px;
   }

   > p {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      font-size: 1.15rem;
      margin-bottom: 40px;
   }
}

.pricing-tables {
   margin: 30px 0 20px;

   > div {
      padding-left: 10px;
      padding-right: 10px;
   }
}

.pricing-table {
   position: relative;
   -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
   border-radius: $pricing-table-border-radius;
   border: 1px solid darken($light-color, 10%);
   border-top: 5px solid darken($light-color, 21%);
   padding: $pricing-table-padding;
   background: $light-color;
   text-align: center;
   margin: $pricing-table-margin;
   opacity: 0.75;
   cursor: default;
   overflow: hidden;

   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;

   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;

   &:hover,
   &.active {
      -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
      opacity: 1;
   }

   &:hover {
      margin-top: -0.75rem;
      margin-bottom: 0.75rem;
      margin-left: -0.25rem;
      margin-right: -0.25rem;
   }

   &:before {
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 72px 72px 0;
      border-color: transparent;
   }

   .pricing-table-icon {
      position: absolute;
      font-size: 1.462rem;
      color: #fff;
      top: 10px;
      right: 16px;
   }

   .pricing-table-ribbon {
      width: 200px;
      height: 35px;
      line-height: 21px;
      font-size: 1rem;
      text-align: center;
      color: darken($light-color, 48%);
      font-weight: bold;
      -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
      background-color: darken($light-color, 10%);
      transform: rotate(45deg);
      position: absolute;
      right: -55px;
      top: 25px;
      padding-top: 7px;
   }

   &-title {
      font-size: 1.538rem;
      font-weight: $font-weight-light;
   }

   &-divider {
      margin: 20px 0;
      border-top: 1px solid #f2f2f2;
   }

   &-price {
      padding: 5px 0 20px;

      .currency {
         vertical-align: top;
      }

      .value {
         font-size: $pricing-table-value-size;
         line-height: $pricing-table-price-line-height;
      }

      .frecuency {
         font-size: $pricing-table-frecuency-size;
         font-weight: $font-weight-light;
      }
   }

   &-features {
      margin: 0 0 25px;
      padding: 0;
      list-style: none;

      > li {
         font-size: 1.077rem;
         font-weight: $font-weight-light;
         line-height: $pricing-table-fatures-line-height;

         &.pricing-table-features-nosupport {
            opacity: 0.4;
            text-decoration: line-through;
         }
      }
   }

   .btn {
      line-height: $pricing-table-button-height;
      min-width: $pricing-table-button-min-width;
   }
}

.pricing-table-primary {
   border-top-color: $primary-color;

   .pricing-table-title {
      color: $primary-color;
   }

   &.pricing-table-promo:before {
      border-right-color: $primary-color;
   }

   .pricing-table-ribbon {
      color: $light-color;
      background-color: $primary-color;
   }
}

.pricing-table-danger {
   border-top-color: $danger-color;

   .pricing-table-title {
      color: $danger-color;
   }

   &.pricing-table-promo:before {
      border-right-color: $danger-color;
   }
}

.pricing-table-warning {
   border-top-color: $warning-color;

   .pricing-table-title {
      color: $warning-color;
   }

   &.pricing-table-promo:before {
      border-right-color: $warning-color;
   }
}