@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$radio-circle-border-standard: 0 0 0 2px rgba(map-get($denali-brand-colors,"300"), 0.5) !default;
$radio-circle-border-hover: 0 0 0 2px map-get($denali-brand-colors,"300") !default;
$radio-circle-border-active: 0 0 0 2px map-get($denali-brand-colors,"300") !default;
$radio-circle-border-disabled: 0 0 0 2px map-get($denali-grey-colors,"500") !default;
$radio-circle-bg-color-active: map-get($denali-brand-colors,"300") !default;
$radio-label-text-color: map-get($denali-grey-colors,"800") !default;
$radio-label-disabled-text-color: map-get($denali-grey-colors,"500") !default;

@mixin radio-default {
  .radio {
    backface-visibility: hidden;
    box-sizing: border-box;
    display: inline-block;
    outline: 0;
    position: relative;
    height: 20px;
    margin-right: 16px;
  }

  .radio > input[type="radio"] {
    height: 20px;
    box-sizing: border-box;
    opacity: 0;
    position: absolute; 
  }

  .radio > label {
    box-sizing: border-box;
    cursor: pointer;
    padding: 0;
    position: relative;
    color: $radio-label-text-color;
    font-size: 14px;
    font-family: helvetica, sans-serif;
    font-weight: normal;
    padding-left: 2px;
  }

  .radio > label:before {
    border-radius: 50%;
    box-shadow: $radio-circle-border-standard;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 10px;
    transition: 0.2s;
    vertical-align: text-top;
    width: 16px;
  }

  .radio > input[type="radio"]:hover + label:before {
    box-shadow: $radio-circle-border-hover;
  }

  .radio > input[type="radio"]:checked + label:before {
    box-shadow: $radio-circle-border-active;
  }

  .radio > input[type="radio"]:disabled + label {
    color: $radio-label-disabled-text-color;
    cursor: not-allowed;
  }

  .radio > input[type="radio"]:disabled + label:before {
    box-shadow: $radio-circle-border-disabled;
  }

  .radio > input[type="radio"]:checked + label:after {
    background-color: $radio-circle-bg-color-active;
    border-radius: 50%;
    box-sizing: border-box;
    content: "";
    height: 12px;
    left: 4px;
    position: absolute;
    top: 2px;
    transition: 0.2s;
    width: 12px;
  }
 }

 @mixin radio-theme {
  .radio>label {
    color: $radio-label-text-color;
  }

  .radio>label:before {
    box-shadow: $radio-circle-border-standard;
  }

  .radio>input[type="radio"]:hover+label:before {
    box-shadow: $radio-circle-border-hover;
  }

  .radio>input[type="radio"]:checked+label:before {
    box-shadow: $radio-circle-border-active;
  }

  .radio>input[type="radio"]:disabled+label {
    color: $radio-label-disabled-text-color;
  }

  .radio>input[type="radio"]:disabled+label:before {
    box-shadow: $radio-circle-border-disabled;
  }

  .radio>input[type="radio"]:checked+label:after {
    background-color: $radio-circle-bg-color-active;
  }
 }