@import '../../styles/vars';
@import '../../styles/typography';
@import '../../styles/sizes';
@import '../../styles/flex';
@import '../../styles/color';
@import '../../styles/media';

@mixin theme($textColor, $bgColor,$activeText, $activeBg) {
  .one-ui-radio__element {
    background-color: $bgColor;
    color: $textColor;

    &:hover {
      color: $textColor;
      background-color: $activeBg;
    }
  }

  .one-ui-radio__element--checked {
    color: $activeText;
    background-color:  $activeBg;
  }
}

.one-ui-radio {
  $root: &;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;

  @include setMargin();
  @include setFlex();

  input {
    margin: 1px 0 0 0;
    width: .1px;
    height: .1px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
  .one-ui-description{
    transform: translate3d(0,-1px,0);
  }
  &__element {
    display: flex;
    background-color: color(grey, 2, .5);
    border-radius: 10px;
    pointer-events: none;
    cursor: pointer;
    transition: background-color .2s ease;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      background-color: color(key);
      border-radius: 100px;
      transition: all .2s ease;
      transform: scale3d(0, 0, 0);
      opacity: 0;
      transform-origin: center center;

    }

    &:after {
      content: '';
      background-color: color(white);
      position: absolute;
      border-radius: 100px;
      transition: all .2s ease;
      transform: scale3d(0, 0, 0);
      opacity: 0;
      transform-origin: center center;
    }

    .one-ui-icon {
      transition: transform .2s ease;
      transform: scale3d(0, 0, 0);
    }

    &--checked {

      &:before, &:after {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }

    }
  }

  &--size {
    $checkbox-sizes: (sm: 16, md: 24, lg: 32);

    @each $key, $size in $checkbox-sizes {
      &-#{$key} {
        #{$root}__element {
          width: #{$size}px;
          height: #{$size}px;

          &:before {
            width: #{$size}px;
            height: #{$size}px;
          }

          &:after {
            width: #{$size / 2}px;
            height: #{$size / 2}px;
            left: #{$size / 4}px;
            top: #{$size / 4}px;
          }
        }
      }
    }

  }

  &--label {
    #{$root}__element {
      margin-right: 16px;
    }
  }

  &--block {
    flex: 1;

    margin-left: 1px;
    min-height: 100%;

    &#{$root}--theme {
      &-primary {
        @include theme(color(dark), color(input), color(white, 2), color(key));
      }


      &-secondary {
        @include theme(color(dark), color(input), color(dark), color(input, 2));
      }


      @include setColor();
    }


    #{$root}__element {
      border-radius: 0;
      display: flex;
      background-color: #EFEFF2;
      color: #6F6E6E;
      height: 100%;
      width: 100%;
      padding: 6px 8px 7px !important;
      min-height: 32px;
      min-width: 32px;
      font-size: 13px;
      letter-spacing: 0;
      line-height: 20px;


      &:after, &:before {
        display: none;
      }

      &--checked {
        background-color: #3A55E7;
        color: #fff;

      }
    }

    &:first-of-type {
      margin-left: 0;

      .one-ui-radio__element {
        border-radius: 4px 0 0 4px !important;
      }
    }

    &:last-of-type {
      .one-ui-radio__element {
        border-radius: 0 4px 4px 0 !important;
      }

    }


    //&-line {
    //    background-color: transparent;
    //    color: color(dark)!important;
    //    border: 1px solid color(gray, 2)!important;
    //
    //    &:hover,
    //    &:focus {
    //        background-color: $gray_color;
    //    }
    //}
  }


}