@use '../_styles/_variables.scss' as *;

$radio-prefix: '#{$prefix}-radio';

.#{$radio-prefix} {
  color: $text-color-base;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;

  &:hover .#{$radio-prefix}-main .#{$radio-prefix}-inner {
    border-color: $primary-color;
  }

  &.#{$radio-prefix}-checked .#{$radio-prefix}-main .#{$radio-prefix}-inner {
    border-color: $primary-color;
    &::after {
      transform: translate(-50%, -50%) scale(1);
      background-color: $primary-color;
    }
  }

  .#{$radio-prefix}-main {
    cursor: pointer;
    display: inline-flex;
    white-space: nowrap;
    outline: 0;

    .#{$radio-prefix}-input {
      opacity: 0;
      outline: 0;
      position: absolute;
      z-index: -1;
      margin: 0;
      width: 0;
      height: 0;
      box-sizing: border-box;
    }

    .#{$radio-prefix}-inner {
      border: 1px solid $border-color;
      border-radius: 100%;
      width: 16px;
      height: 16px;
      background-color: $bg-color-container;
      position: relative;
      display: inline-block;
      cursor: pointer;
      box-sizing: border-box;
      outline: 0;
      &::after {
        box-sizing: border-box;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background-color: transparent;
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition:
          transform 0.15s ease-in,
          background-color 0.15s ease-in;
      }
    }
  }

  .#{$radio-prefix}-content {
    font-size: 12px;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
  }
}