@import "_colors";

.planSelectHolder{
  overflow-x:auto;
  overflow-y:visible;
  padding:20px;
  padding-top:10px;


    button[type='submit']{
      display:block;
      color:#fff;
      background-color:#4caf50;
      border:0px;
      border-radius:3px;
      padding:14px;
      padding-right:20px;
      outline:none;
      text-align:left;
      font-size:14px;
      text-transform: uppercase;
      letter-spacing:2px;
      cursor:pointer;
      position:relative;
      padding-left:50px;
      margin-left:auto;
      transition:transform 0.3s ease-in-out;

      @media screen and (max-width:500px){
        margin-right:auto;
      }

      &:hover{
        transform:scale(1.1);
      }

      ion-icon, svg.ionicon{
        position:absolute;
        top:14px;
        cursor:pointer;
        font-size:20px;
        width:20px;
        height:20px;
        left:14px;
      }

      &.rightIcon{
        padding-right:50px;
        padding-left:20px;
        margin-left:auto;
        width:fit-content;
        width:-webkit-fit-content;   width:-moz-fit-content;

        ion-icon, svg.ionicon{
          left:auto;
          right:14px;
        }
      }

    }


}

@media screen and (max-width:700px){
  .planSelectHolder{
    width:100vw;
    position:relative;
    left:-10px;
    padding-bottom:20px;
  }
}

.planSelect{
  width:600px;

  margin:10px;
  margin-left:auto;
  margin-right:auto;
  display:grid;
  grid-auto-flow: column;


  grid-column-gap:10px;

  .plan{
    background-color:#fff;
    border-radius:20px;
    width:100%;
    cursor:pointer;
    grid-row:1;
    box-shadow:0px 2px 6px rgba(0,0,0,.1);
    border:1px solid #ececec;
    padding:20px;
    text-align:center;
    position:relative;

    .bestValue{
      position:absolute;
      top:-16px;
      right:-16px;
      width:80px;
      transform:rotate(20deg);

    }

    h4{
      font-weight:normal;
      text-align:center;
      padding:5px;
      margin:0px;
      margin-bottom:10px;
      border-bottom:1px solid #ececec;
      text-transform:uppercase;
      font-size:1.2em;
    }

    ul.featureList li svg
    {
      color:#000 !important;
      opacity:0.6;
    }

    ul.featureList li{
      font-size:14px !important;

      i{
        display:block;
        opacity:0.8;
      }
    }

    .price{
      font-size:30px;
      text-align:center;
      display:block;
      font-weight:bold;
      margin-top:6px;

      i{
        font-weight:normal;
        text-align:center;
        display:block;
        font-size:12px;
        opacity:0.6;
        line-height:12px;
      }
    }

    .selectIcon{
      display:block;
      width:20px;
      height:20px;
      border:2px solid #666;
      border-radius:10px;
      margin-left:auto;
      margin-right:auto;
      padding:2px;
    }

    &.static{
      .selectIcon{
        display:none !important;
      }
    }



    &.selected{
      box-shadow:0px 4px 10px rgba(0,0,0,.2);
      color:#fff;
      border:1px solid $color_purple;
      background-color:$color_purple;

      ul.featureList li svg
      {
        color:#fff !important;
      }

      .selectIcon{
        display:block;
        width:20px;
        height:20px;
        border:2px solid #fff;
        border-radius:10px;
        margin-left:auto;
        margin-right:auto;



        span{

          width:12px;
          height:12px;
          border-radius:6px;
          background-color:#fff;
          display:block;
        }
      }


      h4{
        border-bottom:1px solid rgba(255,255,255,0.3);
      }
    }
  }

}