main.scss

// primary color
$marineBlue: hsl(213, 96%, 18%);
$purplishBlue: hsl(243, 100%, 62%);
$pastelBlue: hsl(228, 100%, 84%);
$lightBlue: hsl(206, 94%, 87%);
$strawberryRed: hsl(354, 84%, 57%);

// natural color
$coolGray: hsl(231, 11%, 63%);
$lightGray: hsl(229, 24%, 87%);
$magnolia: hsl(217, 100%, 97%);
$alabaster: hsl(231, 100%, 99%);
$white: hsl(0, 0%, 100%);

//placeholder
%center {
  display: flex;
  align-items: center;
  justify-content: center;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Ubuntu", sans-serif;
}

*a {
  text-decoration: none;
}

main {
  height: 100vh;
  background-color: $magnolia;
  display: flex;
  align-items: center;
  justify-content: center;
  .form {
    background-color: $white;
    padding: 15px;
    display: flex;
    gap: 50px;
    border-radius: 8px;
    max-width: 900px;
    width: 100%;
    margin: 0 20px;
    .steps {
      background-image: url(./assets/images/bg-sidebar-desktop.svg);
      padding: 35px 25px;
      width: 100%;
      max-width: 274px;
      height: 567px;
      @for $i from 1 through 4 {
        .step-#{$i} {
          @extend %center;
          justify-content: flex-start;
          margin-bottom: 35px;
          .step-number {
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: 1px solid white;
            @extend %center;
            font-size: 16px;
            margin-right: 15px;
            font-weight: bold;
            transition-duration: 0.5s;
          }
          .step-info {
            text-transform: uppercase;
            .step-head {
              color: $coolGray;
              font-size: 13px;
              display: block;
              margin-bottom: 2px;
            }
            .step-name {
              color: $white;
              letter-spacing: 2px;
              font-size: 14px;
              font-weight: bold;
            }
          }
          &.active {
            .step-number {
              background-color: $lightBlue;
              color: black;
              border: 1px solid $purplishBlue;
            }
          }
        }
      }
    }
    .form-area {
      padding: 40px;
      padding-bottom: 20px;
      position: relative;
      max-width: 490px;
      width: 100%;
      opacity: 0;
      transition-duration: 0.8s;
      .form-header {
        margin-bottom: 10px;
        font-size: 30px;
        color: $marineBlue;
      }
      .form-description {
        color: $coolGray;
        font-size: 15px;
      }
      .fields {
        margin-top: 40px;
        .field {
          margin-bottom: 25px;
          label {
            display: block;
            margin-bottom: 5px;
            color: $marineBlue;
          }
          input {
            padding: 15px;
            border-radius: 8px;
            width: 100%;
            border: 1px solid $lightGray;
            &::placeholder {
              color: $coolGray;
            }
            &:focus {
              outline: none;
            }
          }
        }
      }
      .plans {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
        .plan-box {
          padding: 15px;
          position: relative;
          // #adbeff26 the background on checked status
          label {
            position: absolute;
            width: 100%;
            left: 0;
            height: 100%;
            top: 0;
            padding: 15px;
            border: 1px solid $lightGray;
            border-radius: 7px;
            cursor: pointer;
          }
          input {
            appearance: none;
            &:focus {
              outline: none;
            }
            &:checked + label {
              background-color: #adbeff26;
              border-radius: 7px;
              border-color: $purplishBlue;
            }
          }
          .plan-info {
            margin-top: 70px;
            .plan-name {
              color: $marineBlue;
            }
            .plan-offer {
              margin: 3px 0;
              color: $coolGray;
              display: block;
              font-size: 12px;
            }
            .free-over {
              color: $marineBlue;
              font-size: 13px;
              font-weight: 400;
              margin-top: 5px;
              // display: none;
            }
          }
        }
      }
      .buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        width: 407.77px;
        height: 44.5px;
        bottom: 20px;
        right: 42px;
        .prev {
          cursor: pointer;
          color: $coolGray;
        }
        .next {
          padding: 10px 20px;
          color: $white;
          border-radius: 6px;
          border: none;
          background: $marineBlue;
          width: 115px;
          text-align: center;
          cursor: pointer;
          &.confirm {
            background-color: $purplishBlue;
          }
        }
      }
    }
  }
}