@import '../_variables.scss';
@import '../_mixins.scss';

@include exports('forms.radios') {
  .fui-radio-wrapper {
    display: block;
    position: relative;
    min-height: 1.25rem;
    width: auto;
    margin: 10px 0 0 0;
    &.has-fui-helper {
      display: flex;
      input[type='radio'] + label {
        display: inline-block;
        margin-right: 0.4375rem;
      }
      .fui-helper {
        flex-shrink: 0;
        margin-top: 2px;
      }
    }

    input[type='radio'] {
      box-sizing: border-box;
      width: $checkbox-min-height;
      height: $checkbox-min-height;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      opacity: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;

      + label {
        color: $gray-900;
        font-size: $font-size-base; // 14px
        cursor: pointer;
        box-sizing: border-box;
        display: block;
        position: relative;
        user-select: none;
        min-height: $checkbox-min-height;
        padding-left: calc(#{$checkbox-min-height} + #{$radio-checkbox-label-left-value});
        line-height: $controls-icons-default-width;
        padding-top: 2px;
        font-weight: $font-weight-base;

        &::before {
          z-index: 0;
          position: absolute;
          box-sizing: border-box;
          content: '';
          top: 0;
          left: 0;
          display: inline-block;
          height: $checkbox-min-height;
          width: $checkbox-min-height;
          border: 1px solid $gray-300;
          border-radius: 50%;
          background: $white;
        }

        &::after {
          z-index: 0;
          display: none;
          content: '';
          position: absolute;
          box-sizing: border-box;
          width: $radiomark-width;
          height: $radiomark-width;
          top: 0;
          left: $radiocircle-left-value;
          transform: translate(0, $radiocircle-left-value);
          background-color: $white;
          border-radius: 50%;
        }
      }

      &:checked {
        + label {
          &::before {
            background-color: $blue;
            border-color: $blue;
          }

          &::after {
            display: inline-block;
          }
        }
      }

      &:focus,
      &:hover {
        + label {
          &::before {
            background-color: $gray-200 !important;
          }
        }

        &:checked {
          + label {
            &::before {
              background-color: $blue-hover !important;
              border-color: $blue-hover !important;
            }
          }
        }
      }

      &[disabled] {
        cursor: default !important;

        + label {
          color: $gray-500 !important;
          cursor: default !important;

          &::before {
            background-color: $gray-200 !important;
            border-color: $gray-400 !important;
          }

          &::after {
            background-color: $gray-500 !important;
          }
        }

        &:focus,
        &:hover {
          + label {
            &::before {
              background-color: $gray-200 !important;
              border-color: $gray-400 !important;
            }
          }

          &:checked {
            + label {
              &::before {
                background-color: $gray-200 !important;
                border-color: $gray-400 !important;
              }
            }
          }
        }
      }
    }
  }

  .fui-control-container {
    .fui-radio-subtext-wrapper {
      display: none;
      padding: 5px 0 0 2px;

      .fui-subtext {
        color: $red;
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 0 12px;

        visibility: hidden;
        opacity: 0;
        transition: visibility 0s ease 0.2s, opacity 0.2s ease;
      }
    }

    &.fui-touched,
    &.fui-dirty {
      .fui-radio-subtext-wrapper {
        .fui-subtext:first-child {
          visibility: visible;
          opacity: 1;
          transition-delay: 0s;
        }
      }

      &.fui-error {
        .fui-radio-subtext-wrapper {
          display: block;
        }

        .fui-radio-wrapper {
          .fui-control-label {
            &::before {
              border-color: $red;
            }
          }
        }
      }
    }
  }
}