.rlf-form {
  border-radius: 10px;
  box-shadow: $shadow1;
  margin: 100px auto;
  padding: 20px;
  transition: opacity 0.5;

  .title {
    h1 {
      color: gray(60);
      font-size: 2em;
      font-weight: 300;
      margin: 0px;
    }
  }

  input,
  select,
  textarea {
    border: 1px solid gray(200);
    border-radius: 100px;
    outline: none;
    padding: 10px 15px;

    &:focus {
      border-color: $themeColor;
    }
  }

  .rlf-text,
  .rlf-select,
  .rlf-checkbox,
  .rlf-textarea {
    display: inline-block;
    vertical-align: top;

    .label {
      color: gray(60);
      font-size: 0.8em;
      font-weight: 400;
      margin: 0px;
      margin-bottom: 2px;
      margin-left: 15px;
    }

    input,
    select {
      color: gray(60);
      line-height: 20px;
    }

    input {
      height: 20px;
      width: calc(100% - 30px);
    }

    select {
      height: 42px;
      padding-left: 10px;
      width: 100%;
    }
  }

  .rlf-text,
  .rlf-select,
  .rlf-checkbox,
  .rlf-textarea {
    position: relative;
    &.error {
      input,
      .checkbox-toggle-track,
      select,
      textarea {
        border-color: $red;

        &.flash-error {
          animation: flashError 3s ease-in-out;

          ~ .checkbox-toggle-track {
            animation: flashError 3s ease-in-out;
          }
        }
      }
    }

    .error-message {
      bottom: -17px;
      color: $red;
      font-size: 0.8em;
      font-weight: 400;
      left: 0px;
      margin: 0px;
      margin-left: 15px;
      margin-top: 2px;
      position: absolute;
    }
  }

  .rlf-text,
  .rlf-select,
  .rlf-checkbox {
    margin: 10px;
    width: calc(33.33% - 20px);
  }

  .rlf-button {
    &.submit {
      margin-top: 20px;
    }

    button {
      background-color: $themeColor;
      border: none;
      border-radius: 100px;
      color: white;
      display: block;
      margin: auto;
      outline: none;
      padding: 10px;
      width: 400px;

      &:hover,
      &:focus {
        box-shadow: $shadow1;
        cursor: pointer;
      }
    }
  }

  .rlf-checkbox {
    height: 59px;
    position: relative;

    input {
      cursor: pointer;
      height: 42px;
      left: 0px;
      margin: 0px;
      opacity: 0;
      position: absolute;
      top: 17px;
      width: 72px;

      &:hover,
      &:focus {
        ~ .checkbox-toggle-track {
          .checkbox-toggle {
            box-shadow: $shadow2;
          }
        }
      }

      &:focus {
        ~ .checkbox-toggle-track {
          border-color: $blue;
        }
      }

      &:checked {
        ~ .checkbox-toggle-track {
          background-color: rgba($blue, 0.25);
          .checkbox-toggle {
            left: 100%;
            transform: translateX(-100%);
          }
        }
      }
    }

    .checkbox-toggle-track {
      border: 1px solid gray(200);
      border-radius: 100px;
      display: inline-block;
      height: 40px;
      left: 0px;
      pointer-events: none;
      position: absolute;
      width: 70px;

      .checkbox-toggle {
        background-color: $blue;
        border-radius: 100px;
        height: 40px;
        left: 0px;
        position: absolute;
        top: 0px;
        transition: all 0.25s;
        width: 40px;
      }
    }
  }

  .rlf-textarea {
    display: block;
    margin: 10px 0px;
    textarea {
      border-radius: 10px;
      max-width: calc(100% - 32px);
      min-height: 100px;
      min-width: calc(100% - 32px);
    }

    .error-message {
      bottom: -15px;
    }
  }
}