@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-radio-size: 24px;
  --xzx-radio-icon-size: 21px;
  --xzx-radio-dot-size: 12px;
  --xzx-radio-border-color: var(--xzx-gray-4);
  --xzx-radio-duration: 0.2s;
  --xzx-radio-margin: 12px;
  --xzx-radio-label-margin: 8px;
  --xzx-radio-border-width: 1.5px;
  --xzx-radio-label-color: var(--xzx-text-gray-1);
  --xzx-radio-checked-icon-color: var(--xzx-color-primary);
  --xzx-radio-disabled-icon-color: var(--xzx-gray-4);
  --xzx-radio-disabled-label-color: var(--xzx-text-gray-4);
  --xzx-radio-disabled-background: var(--xzx-gray-2);
}

@include b(radio-group) {
  @include m(horizontal) {
    display: flex;
    flex-wrap: wrap;
  }
}

@include b(radio) {
  display: flex;
  // align-items: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  @include m(disabled) {
    cursor: not-allowed;
  }

  @include m(label-disabled) {
    cursor: default;
  }

  @include m(horizontal) {
    margin-right: var(--xzx-radio-margin);
  }

  @include e(icon) {
    flex: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--xzx-radio-size);
    height: var(--xzx-radio-size);
    font-size: var(--xzx-radio-icon-size);
    flex-shrink: 0;

    .#{$namespace}-icon {
      box-sizing: border-box;
      color: transparent;
      text-align: center;
      border: var(--xzx-radio-border-width) solid var(--xzx-radio-border-color);
      transition-duration: var(--xzx-radio-duration);
      transition-property: color, border-color, background-color;

      path {
        stroke-width: 3px;
      }
    }
    @include m(round) {
      .#{$namespace}-icon {
        padding: 2px;
        border-radius: 100%;
      }
    }
    @include m(square) {
      .#{$namespace}-icon {
        border-radius: var(--xzx-br-sm);
      }
    }
    @include m(dot) {
      position: relative;
      box-sizing: border-box;
      width: var(--xzx-radio-size);
      height: var(--xzx-radio-size);
      border: var(--xzx-radio-border-width) solid transparent;
      border-color: transparent;
      border-width: 0;
      transition-duration: var(--xzx-radio-duration);
      transition-property: border-color;

      &::after {
        content: '';
        position: absolute;
        display: block;
        border-radius: 100%;
        width: var(--xzx-radio-icon-size);
        height: var(--xzx-radio-icon-size);
        border: var(--xzx-radio-border-width) solid var(--xzx-radio-border-color);
        transition-duration: var(--xzx-radio-duration);
        transition-property: border-color;
      }

      .#{$namespace}-radio__icon--dot__icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        height: var(--xzx-radio-dot-size);
        width: var(--xzx-radio-dot-size);
        transition-duration: var(--xzx-radio-duration);
        transition-property: background-color;
      }
    }

    @include m(indeterminate) {
      .#{$namespace}-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--xzx-text-white-1);
        border-color: var(--xzx-radio-checked-icon-color);
        background-color: var(--xzx-radio-checked-icon-color);
      }
    }
    @include m(checked) {
      --xzx-radio-disabled-icon-color: var(--xzx-brand-3);
      --xzx-radio-disabled-background: var(--xzx-brand-3);
      &::after {
        border-color: var(--xzx-radio-checked-icon-color);
      }
      .#{$namespace}-icon {
        color: var(--xzx-text-white-1);
        background-color: var(--xzx-radio-checked-icon-color);
        border-color: var(--xzx-radio-checked-icon-color);
      }
      &.#{$namespace}-radio__icon--dot {
        .#{$namespace}-radio__icon--dot__icon {
          background-color: var(--xzx-radio-checked-icon-color);
        }
      }
    }
    @include m(disabled) {
      cursor: not-allowed;
      .#{$namespace}-icon {
        background-color: var(--xzx-radio-disabled-background);
        border-color: var(--xzx-radio-disabled-icon-color);
      }
      &.#{$namespace}-radio__icon--dot {
        &::after {
          background-color: var(--xzx-gray-2);
          z-index: -1;
        }
      }

      &.#{$namespace}-radio__icon--checked {
        .#{$namespace}-icon {
          // color: var(--xzx-radio-disabled-icon-color);
        }

        &.#{$namespace}-radio__icon--dot {
          &::after {
            border-color: var(--xzx-radio-disabled-icon-color);
          }

          .#{$namespace}-radio__icon--dot__icon {
            background-color: var(--xzx-radio-disabled-icon-color);
          }
        }
      }
    }
  }
  @include e(label) {
    margin-left: var(--xzx-radio-label-margin);
    color: var(--xzx-radio-label-color);
    line-height: var(--xzx-radio-size);
    @include m(left) {
      margin: 0 var(--xzx-radio-label-margin) 0 0;
    }
    @include m(disabled) {
      color: var(--xzx-radio-disabled-label-color);
    }
  }
}