@import "../global/_variables";

.form-container {
  min-height: 200px;
  border-left: 8px solid;
  background: $blank_2;
  .form-container-menu {
    padding-left: 24px;
    padding-top: 15px;
    height: 56px;
    border-bottom: 1px solid $main_3;
    .info {
      vertical-align: 5px;
      padding-left: 8px;
      font-size: 18px;
    }
    .icon {
      font-size: 24px;
    }
  }
  .form-container-content {
    padding: 24px;
  }
  &.form-default {
    border-color: $main_3;
  }
  &.form-active {
    border-color: $prim_4;
  }
  &.form-error {
    border-color: $sec_2;
  }
  &.form-success {
    border-color: $info_2;
  }
}

.scui-radio-button {
  .example-radio-group {
    display: flex;
    flex-direction: column;
    margin: 15px 0;
  }
  .example-radio-button {
    margin: 5px;
  }
  .example-radio-group-label {
    color: $main_5;
    font-size: 13px;
    text-transform: uppercase;
    height: 32px;
    padding-top: 10px;
    display: inline-block;
  }
  .mat-radio-group {
    margin-top: 0 !important;
  }
}

.mat-radio-button {
  height: 40px;
  padding-top: 8px;
  margin: 0 !important;
  .mat-radio-label {
    &:hover {
      .mat-radio-outer-circle {
        background: $prim_1;
        border: 1px solid $prim_4;
      }
    }
  }
  .mat-radio-container {
    .mat-radio-outer-circle {
      border: 1px solid $main_9;
      background: $main_1;
    }
  }

  .mat-radio-label-content {
    font-size: 15px !important;
    font-weight: 300;
    color: $blank_1;
  }

  .mat-radio-persistent-ripple {
    display: none;
  }

  .mat-radio-ripple {
    display: none;
  }

  &.mat-radio-checked {
    .mat-radio-inner-circle {
      background: $prim_5 !important;
    }
    .mat-radio-outer-circle {
      border: 1px solid $prim_5 !important;
    }
  }

  &.mat-radio-checked {
    .mat-radio-outer-circle {
      background: $prim_1 !important;
    }
  }

  &.mat-radio-disabled {
    .mat-radio-label-content {
      color: $main_6;
    }
    .mat-radio-outer-circle {
      background: $main_1 !important;
      border: 1px solid $main_5 !important;
    }
  }

}

.scui-checkbox {
  height: 40px;
  padding-top: 10px;
  .checkbox-wrap {
    height: 40px;
    padding-top: 10px;
  }
  .group-label {
    color: $main_5;
    font-size: 13px;
    text-transform: uppercase;
    height: 32px;
    padding-top: 10px;
    font-weight: 500;
  }
  .checkbox-container {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 8px;
    background: $main_1;
    border: 1px solid $main_9;
    cursor: pointer;
    position: relative;
    .icon {
      color: $blank_2;
      position: absolute;
      font-size: 24px;
      top: -3px;
      left: -3px;
    }
  }
  .checkbox-label {
    font-size: 15px;
    vertical-align: 4px;
    font-weight: 300;
  }

  &.disabled {
    pointer-events: none;
    .checkbox-container {
      background: $main_1;
      border-color: $main_5;
    }
    .checkbox-label {
      color: $main_6;
    }
    &:hover {
      .checkbox-container {
        background: $main_1 !important;
        border-color: $main_5 !important;
      }

    }
  }

  &.checked {
    .checkbox-container {
      background: $prim_5 !important;
      border-color: $prim_5 !important;
    }
  }

  &:hover {
    .checkbox-container {
      background: $prim_1;
      border-color: $prim_5;
    }
  }

}