@use 'variables' as *;
@use '@xui/theme-core' as core;

@mixin theme() {
  .x-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px;
    cursor: pointer;
    font-weight: 500;
    user-select: none;

    @include core.border-radius($border-radius);

    &:not(.x-radio-option-disabled):hover {
      background-color: core.modifier-hover();
    }

    &-active {
      @include core.fill(primary);
    }

    &-focus {
      outline: 5px solid var(--focus-color);
      z-index: 1;
    }

    &-disabled {
      cursor: not-allowed;
      @include core.disabled();
    }

    &-description {
      @include core.typography-level(body-2);
    }

    &-md {
      height: 64px;
    }

    &-sm {
      height: 48px;

      .x-radio-option-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    &-background-light {
      @include core.fill(secondary);
    }

    &-background-dark {
      @include core.fill(tertiary);
    }

    @each $name in core.$color-variations {
      &-#{$name} {
        border-left: 3px solid var(--color-#{$name}-default);
        padding-left: 9px;
      }
    }
  }
}