@import 'config';
@import '../variables';

.#{$framework-prefix}radio {
  &-input {
    position: absolute;
    left: -200vw;
    z-index: -1;
  }
  &-label {
    --radio-border-h-color: #{$radio-border-h-color};
    --radio-border-color: #{$radio-border-color};
    --radio-container-size: #{$radio-container-size};
    --radio-circle-size: #{$radio-circle-size};
    --radio-border-width: #{$radio-circle-width};
    margin-bottom: 32px;
    align-items: center;
    position: relative;
    cursor: pointer;
    display: flex;
    
    &:last-child {
      margin-bottom: 0;
    }
    &:hover:before {
      border-color: var(--radio-border-h-color);
    }
    &:focus {
      outline: none;
      &:before {
        border-color: var(--green);
      }
      &:after {
        background: var(--green);
      }
    }
    &:after {
      left: calc(calc(var(--radio-container-size) - var(--radio-circle-size)) / 2 );
      top: calc(50% - calc(var(--radio-circle-size)) / 2);
      transition: background-color var(--transition-time);
      height: var(--radio-circle-size);
      width: var(--radio-circle-size);
      position: absolute;
      border-radius: 50%;
      display: block;
      content: '';
    }
    input:checked + &:before {
      border-color: var(--green);
    }
    input:checked + &:after {
      background: var(--green);
    }
    &:before {
      transition: border-color var(--transition-time);
      border: 1px solid var(--radio-border-color);
      min-width: var(--radio-container-size);
      height: var(--radio-container-size);
      width: var(--radio-container-size);
      border-radius: 50%;
      margin-right: 20px;
      content: '';
    }
  }
}