@use "../../../feature/lookAndFeel/feel" as feel;
@use "../../../feature/lookAndFeel/style-guide" as style;

#plan-table {
  .plan-benefits, .plan-features {
    margin:          0;
    list-style-type: none;

    > li {
      border-bottom:  1px solid $card-border-color;
      vertical-align: middle;
      height:         45px;
    }
  }

  .plan-benefits {
    margin-top: 91px;
    padding:    0;

    .plan-benefit {
      font-size:   14px;
      padding:     12px 0;
      display:     flex;
      align-items: center;
    }
  }

  .plan-features {
    padding: 0;

    > li {
      font-size: 17px;
      padding:   12px 0;

      &:last-child {
        border-bottom: none;
      }

      &.feature-button {
        padding: 21px;
        height:  auto;
      }
    }
  }

  .plan {
    background-color: #fff;
    border:           2px solid transparent;
    box-shadow:       0 0 25px rgba(0, 0, 0, 0.15);
    text-align:       center;
    width:            20%;

    > .plan-header {
      background-color: #f0f2f6;
      margin:           -2px -2px 0;
      padding:          7px 0;

      > .plan-price, > .plan-price-old {
        display: inline-block;
      }

      > .plan-price {
        font-size: 21px;
      }

      > .plan-price-old {
        font-size:       15px;
        margin-top:      -10px;
        text-decoration: line-through;
        opacity:         .8;
      }

      > .plan-name {
        font-size: 15px;
        color:     inherit;
        position:  relative;

        > strong {
          font-size: 17px;
        }

        &:after {
          content:          '';
          height:           2px;
          width:            50px;
          position:         absolute;
          left:             calc(50% - 25px);
          background-color: #e4e4e4;
          bottom:           -8px;
        }
      }
    }

    &.selected {
      box-shadow:   0 0 25px rgba(0, 0, 0, 0.25);
      border-color: $primary;
      margin-left:  -5px;
      margin-right: -5px;
      margin-top:   -10px;
      z-index:      1;
      position:     relative;

      > .plan-header {
        @include feel.modern {
          background-color: style.$green-500;
        }
        @include feel.legacy {
          background-color: $primary;
        }
        color:   #fff;
        padding: 12px 0;
      }

      .feature-button {
        padding:   30px 0;
        font-size: 20px;
      }
    }
  }
}

.custom-plan {
  .custom-plan-container {
    width:      250px;
    text-align: left;
    margin:     auto;
  }

  .custom-plan-info {
    font-size: 15px;
  }
}
