@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'mixins/button' as *;
@use 'common/var' as *;
@use 'mixins/function' as *;

@include b(radio-item) {
  @include set-component-css-var('radio-item', $radio-item);
}

@include b(radio-item) {
  width: 440px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  outline: none;
  padding: 16px 24px;
  margin-right: 24px;
  border: getCssVar('radio-item-border');
  transition: getCssVar('transition-all');

  @include e(original-radio) {
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;
  }
  @include e(pic) {
    width: 60px;
    height: 60px;
    margin-right: 24px;
    flex-shrink: 0;
  }
  @include e(label) {
    font-size: map.get($font-size, 'base');
    line-height: getLineHeight(map.get($font-size, 'base'));
  }
  &:hover {
    border-color: getCssVar('radio-item-checked-border-color');
  }
  &.is-checked {
    background-color: getCssVar('radio-item-checked-background-color');
    border-color: getCssVar('radio-item-checked-border-color');
  }
}
