/*! _radios.scss | Friendkit | © Css Ninja. 2020-2021 */

/* ==========================================================================
Radio buttons styles
========================================================================== */

/*
    1. Variables
    2. Material Radio buttons
*/

/* ==========================================================================
1. Variables
========================================================================== */

$color-black: #000000 !default;
$color-white: #ffffff !default;
$color-grey-500: mix($color-white, $color-black, 62%) !default;
$color-accent-500: $primary !default;

$color-radio-off: $color-black !default;
$color-radio-on: $color-accent-500 !default;
$color-radio-background-off: rgba($color-radio-off, 0.07) !default;
$color-radio-background-disabled: $color-radio-background-off !default;
$color-radio-background-on: rgba($color-radio-on, 0.1) !default;
$color-radio-border-off: $placeholder !default;
$color-radio-border-disabled: rgba($color-radio-off, 0.26) !default;
$color-radio-border-on: $color-radio-on !default;

/* ==========================================================================
2. Material Radio buttons
========================================================================== */

@mixin radio-checked($color) {
  background: transparent;
  border-color: $color;
}

@mixin checkbox-checked($color) {
  background: transparent;
  border-color: $color;
  border: none;
}

.material-radio {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &.is-accent {
    .dot {
      background-color: $accent;
    }

    input:checked {
      @include radio-checked($accent);

      + .dot {
        transform: scale(1);
      }
    }

    input:focus:checked,
    input.focus:checked {
      background-color: transparent;
      border-color: $accent;
      box-shadow: 0 0 0 12px rgba($accent, 0.1);
    }

    &:active {
      input:checked {
        background-color: transparent;
        border-color: $accent;
        box-shadow: 0 0 0 12px rgba($accent, 0.1);
      }
    }
  }

  &.is-green {
    .dot {
      background-color: $green;
    }

    input:checked {
      @include radio-checked($green);

      + .dot {
        transform: scale(1);
      }
    }

    input:focus:checked,
    input.focus:checked {
      background-color: transparent;
      border-color: $green;
      box-shadow: 0 0 0 12px rgba($green, 0.1);
    }

    &:active {
      input:checked {
        background-color: transparent;
        border-color: $green;
        box-shadow: 0 0 0 12px rgba($green, 0.1);
      }
    }
  }

  &.is-blue {
    .dot {
      background-color: $blue;
    }

    input:checked {
      @include radio-checked($blue);

      + .dot {
        transform: scale(1);
      }
    }

    input:focus:checked,
    input.focus:checked {
      background-color: transparent;
      border-color: $blue;
      box-shadow: 0 0 0 12px rgba($blue, 0.1);
    }

    &:active {
      input:checked {
        background-color: transparent;
        border-color: $blue;
        box-shadow: 0 0 0 12px rgba($blue, 0.1);
      }
    }
  }

  &.is-orange {
    .dot {
      background-color: $orange;
    }

    input:checked {
      @include radio-checked($orange);

      + .dot {
        transform: scale(1);
      }
    }

    input:focus:checked,
    input.focus:checked {
      background-color: transparent;
      border-color: $orange;
      box-shadow: 0 0 0 12px rgba($orange, 0.1);
    }

    &:active {
      input:checked {
        background-color: transparent;
        border-color: $orange;
        box-shadow: 0 0 0 12px rgba($orange, 0.1);
      }
    }
  }

  &.is-red {
    .dot {
      background-color: $red;
    }

    input:checked {
      @include radio-checked($red);

      + .dot {
        transform: scale(1);
      }
    }

    input:focus:checked,
    input.focus:checked {
      background-color: transparent;
      border-color: $red;
      box-shadow: 0 0 0 12px rgba($red, 0.1);
    }

    &:active {
      input:checked {
        background-color: transparent;
        border-color: $red;
        box-shadow: 0 0 0 12px rgba($red, 0.1);
      }
    }
  }

  .dot {
    position: absolute;
    top: calc(50% - 3px);
    left: 6.5px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: $color-radio-on;
    transform: scale(0);
    z-index: 5;
    transition: all 0.3s;
  }

  input,
  input:hover,
  input.hover {
    -webkit-appearance: none;
    border: 1.4px solid $color-radio-border-off;
    border-radius: 13px;
    height: 19px;
    margin: 0;
    vertical-align: top;
    width: 19px;
  }

  input:focus,
  input.focus {
    background-color: transparent;
    border-color: $color-radio-border-off;
    box-shadow: 0 0 0 12px $color-radio-background-off;
    outline: none;
  }

  input:disabled {
    border-color: $color-radio-border-disabled;
  }

  input:disabled:focus,
  input:disabled.focus {
    background-color: transparent;
    border-color: $color-radio-border-disabled;
    box-shadow: 0 0 0 12px $color-radio-background-disabled;
  }

  input:checked {
    @include radio-checked($color-radio-on);

    + .dot {
      transform: scale(1);
    }
  }

  input:focus:checked,
  input.focus:checked {
    background-color: transparent;
    border-color: $color-radio-border-on;
    box-shadow: 0 0 0 12px $color-radio-background-on;
  }

  input:disabled:checked {
    @include radio-checked($color-radio-border-disabled);
  }

  input:disabled:focus:checked,
  input:disabled.focus:checked {
    background-color: $color-radio-background-disabled;
    border-color: $color-radio-border-disabled;
    box-shadow: 0 0 0 12px $color-radio-background-disabled;
  }

  .radio-label {
    line-height: 30px;
    font-size: 0.9rem;
    margin: 0 10px;

    small {
      font-weight: 600;
      color: $primary;
    }
  }

  &:active,
  &.active {
    input {
      background-color: $color-radio-background-off;
      border-color: $color-radio-border-off;
      box-shadow: 0 0 0 12px $color-radio-background-off;
      outline: none;
    }

    input:disabled {
      background-color: $color-radio-background-disabled;
      border-color: $color-radio-border-disabled;
      box-shadow: 0 0 0 12px $color-radio-background-disabled;
    }

    input:checked {
      background-color: $color-radio-background-on;
      border-color: $color-radio-border-on;
      box-shadow: 0 0 0 12px $color-radio-background-on;
    }

    input:disabled:checked {
      background-color: $color-radio-background-disabled;
      border-color: $color-radio-border-disabled;
      box-shadow: 0 0 0 12px $color-radio-background-disabled;
    }
  }
}
