// Dependencies
@import 'config/variables';
@import 'config/checkboxes';
@import 'config/direction';
@import 'config/dimensions';
@import 'config/fonts';
@import 'config/colors';
@import 'config/accessibility';
@import 'config/checkboxes';

// Declarations
// @mixin radio() {
//   font-size: $font-size-base;
//   font-weight: $font-weight-bold;
//   cursor: pointer;
//   display: block;
//   padding-#{$text-direction-start}: 40px;
//   position: relative;
//   margin-bottom: $spacing-base;

//   &:last-of-type {
//     margin-bottom: 0
//   }

//   > input {
//     @include sr-only()
//   }
// }

// @mixin radio-label {
//   display: flex;
//   line-height: map-get(map-get($variables, 'inputs'), 'checkbox-size');
// }

@mixin radios-btn() {
  transition: all .2s;

  background: $color-white;
  border: 1px solid $color-grey-mid;
  border-radius: 50%;
  content: '';
  display: inline-block;

  width: $checkbox-size;
  height: $checkbox-size;
  min-width: $checkbox-size;
  margin-#{$text-direction-end}: .5 * $spacing-base;
}

@mixin radios-btn-checked() {
  background-color: $color-blue;
  box-shadow: 0 0 0 2px $color-blue inset, 0 0 0 4px $color-white inset;
  border: 0;
}

@mixin radios-btn-focused() {
  border: 0;
  box-shadow: 0 0 0 2px $color-blue inset, 0 0 0 4px $color-white inset;
}