@import "../ui.vars.less";

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
    input[type='radio'] {
      --active: @scAction;
      --focus: 2px @scActionVeryLight;
      --border: @scInactive;
      --border-hover:@scAction;
      --background: @appWhite;
      --disabled: @scNeutralLight;
      --disabled-inner: @scInactive;
      -webkit-appearance: none;
      -moz-appearance: none;
      height: 20px;
      outline: none !important;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      border: 2px solid var(--bc, var(--border));
      background: var(--b, var(--background));
      transition: background .3s, border-color .3s, box-shadow .2s;
      &:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .1s);
      }
      &:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .1s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
      }
      &:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 1;
        &:checked {
          --b: var(--disabled-inner);
          --bc: var(--border);
        }
      }
      &:hover {
        &:not(:checked) {
          &:not(:disabled) {
            --bc: var(--border-hover);
          }
        }
      }
      &:focus {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .1s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
      }
      &:not(.switch) {
        width: 20px;
        min-width: 20px;
        &:after {
          opacity: var(--o, 0);
        }
        &:checked {
          --o: 1;
        }
      }
    }

    input[type='radio'] {
      border-radius: 100%;
      &:after {
        width: 16px;
        height: 16px;
        border-radius: 100%;
        border: 2px solid @appWhite;
        opacity: 0;
      }
    }

  }