/*
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-radio-theme() {
  el-radio {
    .outer-circle,
    .inner-circle {
      height: el-theme(radio-height);
      width: el-theme(radio-width);
    }

    .outer-circle {
      background-color: el-theme(radio-background-color);
      border-color: el-theme(radio-border-color);
      border-style: el-theme(radio-border-style);
      border-width: el-theme(radio-border-width);
    }

    .native-input:enabled:checked + .outer-circle {
      background-color: el-theme(radio-primary-checked-background-color);
      border-color: el-theme(radio-primary-border-color);
    }

    .native-input:enabled:checked ~ .inner-circle {
      background-color: el-theme(radio-primary-inner-circle-color);;
    }

    .native-input:enabled:focus + .outer-circle {
      border-color: el-theme(radio-primary-focus-border-color);
      box-shadow: 0 0 0 el-theme(radio-outline-width) el-theme(radio-outline-color);
    }

    .native-input:enabled:checked:focus ~ .inner-circle {
      background-color: el-theme(radio-primary-focus-inner-circle-color);
    }

    label:hover .native-input:enabled {
      & + .outer-circle {
        background-color: el-theme(radio-primary-hover-background-color);
        border-color: el-theme(radio-primary-hover-border-color);
      }
      &:checked + .outer-circle {
        background-color: el-theme(radio-primary-hover-checked-background-color);
      }
      &:checked ~ .inner-circle {
        background-color: el-theme(radio-primary-hover-inner-circle-color);
      }
    }

    label .native-input:enabled:active + .outer-circle {
      border-color: el-theme(radio-primary-active-border-color);
    }
    label .native-input:enabled:checked:active ~ .inner-circle {
      background-color: el-theme(radio-primary-active-inner-circle-color);
    }

    .native-input:disabled {
      & + .outer-circle {
        background-color: el-theme(radio-disabled-background-color);
        border-color: el-theme(radio-disabled-border-color);
      }
      & ~ .text {
        color: el-theme(radio-disabled-text-color);
      }

      &:checked {
        & + .outer-circle {
          background-color: el-theme(radio-disabled-checked-background-color);
        }
        ~ .inner-circle {
          background-color: el-theme(radio-disabled-checked-inner-circle-color);
        }
      }
    }

    @each $status in el-get-statuses() {
      &.status-#{$status} .native-input:enabled + .outer-circle {
        background-color: el-theme(radio-#{$status}-background-color);
        border-color: el-theme(radio-#{$status}-border-color);
      }

      &.status-#{$status} .native-input:enabled:checked + .outer-circle {
        background-color: el-theme(radio-#{$status}-checked-background-color);
      }

      &.status-#{$status} .native-input:enabled:checked ~ .inner-circle {
        background-color: el-theme(radio-#{$status}-inner-circle-color);;
      }

      &.status-#{$status} .native-input:enabled:focus + .outer-circle {
        border-color: el-theme(radio-#{$status}-focus-border-color);
      }
      &.status-#{$status} .native-input:enabled:checked:focus ~ .inner-circle {
        background-color: el-theme(radio-#{$status}-focus-inner-circle-color);
      }

      &.status-#{$status} label:hover .native-input:enabled + .outer-circle {
        border-color: el-theme(radio-#{$status}-hover-border-color);
      }
      &.status-#{$status} label:hover .native-input:checked:enabled ~ .inner-circle {
        background-color: el-theme(radio-#{$status}-hover-inner-circle-color);
      }

      &.status-#{$status} label .native-input:enabled:active + .outer-circle {
        border-color: el-theme(radio-#{$status}-active-border-color);
      }
      &.status-#{$status} label .native-input:enabled:checked:active ~ .inner-circle {
        background-color: el-theme(radio-#{$status}-active-inner-circle-color);
      }
    }

    .text {
      color: el-theme(radio-text-color);
      font-family: el-theme(radio-text-font-family);
      font-size: el-theme(radio-text-font-size);
      font-weight: el-theme(radio-text-font-weight);
      line-height: el-theme(radio-text-line-height);
      margin-left: el-theme(radio-width);
    }
  }
}