@import '../../style/themes';
@import '../../style/mixins';

@import '../../checkbox/style';

.x-radio {
  @include checkbox();

  &:not(&-checked):hover &_dot {
      border: 2px further($gray, 10) solid;
    }
    &:hover &_dot {
      &::after {
        background: further($gray, 10);
      }
    }

    &:not(&-checked):active &_dot {
      border: 2px further($gray, 7) solid;
    }
    &:active &_dot {
      border: 2px further($gray, 7) solid;
      filter: grayscale(100%);
      &::after {
        background: further($gray, 7);
      }
    }

  &_dot {
    border-radius: 50%;
    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: further($gray, 8);
      transform: translate(-50%, -50%);
    }
  }
}