@use "sass:map";
@use 'mixin' as *;
@use 'theme-variables' as *;

@include export-module('radiobutton-layout') {

  .sf-radio-label {
    color: $radio-btn-font-color;
    display: flex;
    vertical-align: middle;
    align-items: center;
    white-space: normal;
    position: relative;
    line-height: normal;
    user-select: none;
    cursor: pointer;
    &::before,
    &::after {
      border: $radio-btn-border;
      border-radius: $radio-btn-border-radius;
      box-sizing: border-box;
      content: '';
      position: absolute;
    }
  }

  .sf-radio-label {
    &::before {
      border-color: $radio-btn-checked-border-color;
    }
  }

  .sf-radio:checked {
    +label {
      &::after {
        background-color: $radio-btn-checked-color;
        color: $radio-btn-checked-color;
        transform: scale(1);
      }
    }
  }

  .sf-radio-label {
    &:hover {
      .sf-ripple-container {
        background: $radio-btn-checked-ripple-bgcolor;
      }
    }
  }

  .sf-radio {
    appearance: none;
    height: 1px;
    opacity: $radio-btn-opacity;
    width: 1px;
    +label {
      &::before {
        background-color: $radio-btn-background-color;
        border-color: $radio-btn-border-color;
      }
      &::after {
        transform: scale(0);
      }
      & .sf-ripple-container {
        border-radius: $radio-btn-border-radius;
        position: absolute;
        z-index: 1;
      }
    }
    &:disabled {
      +label {
        cursor: default;
        pointer-events: none;
        &::before {
          background-color: $radio-btn-disabled-background-color;
          border-color: $radio-btn-disabled-border-color;
        }
        & .sf-ripple-container {
          background-color: transparent;

          &::after {
            background-color: transparent;
          }
        }
        & .sf-label {
          color: $radio-btn-disabled-color;
        }
      }
    }
    &:focus-visible {
      +label {
        &::before {
          box-shadow: $radio-keyboard-focus-box-shadow;
        }
      }
    }
  }

  .sf-radio-me {
  @include radio-base(
    $radio-btn-font-size,
    $radio-btn-line-height,
    $radio-btn-padding-left,
    $radio-btn-height,
    $radio-btn-icon-height,
    $radio-btn-icon-left,
    $radio-btn-ripple-size,
    $radio-btn-ripple-left-position
  );

  &.sf-bottom .sf-label {
    padding-top: $radio-btn-medium-bottom-padding-top;
    padding-inline-start: $radio-btn-bottom-padding-left;
  }

  @include radio-orientation(
    $radio-btn-padding-left,
    $radio-btn-icon-left,
    $radio-btn-ripple-left-position
  );
}

.sf-radio-sm {
  @include radio-base(
    $radio-btn-small-font-size,
    $radio-btn-small-line-height,
    $radio-btn-small-padding,
    $radio-btn-small-height,
    $radio-btn-small-icon-height,
    $radio-btn-small-icon-left,
    $radio-btn-small-ripple-Width,
    $radio-btn-small-ripple-position
  );

  &.sf-bottom .sf-label {
    padding-top: $radio-btn-small-bottom-padding-top;
    padding-inline-start: $radio-btn-bottom-padding-left;
  }

  @include radio-orientation(
    $radio-btn-small-padding,
    $radio-btn-small-icon-left,
    $radio-btn-small-ripple-position
  );
}

.sf-radio-la {
  @include radio-base(
    $radio-btn-large-font-size,
    $radio-btn-line-height,
    $radio-btn-large-padding,
    $radio-btn-large-height,
    $radio-btn-large-icon-height,
    $radio-btn-large-icon-left,
    $radio-btn-large-ripple-size,
    $radio-btn-large-ripple-left-position
  );

  &.sf-bottom .sf-label {
    padding-top: $radio-btn-medium-bottom-padding-top;
    padding-inline-start: $radio-btn-bottom-padding-left;
  }

  @include radio-orientation(
    $radio-btn-large-padding,
    $radio-btn-large-icon-left,
    $radio-btn-large-ripple-left-position
  );
}


  @each $variant, $colors in $radio-variants {
    .sf-radio-#{$variant} {
      .sf-radio:checked + label::after {
        background-color: map.get($colors, bg);
        border-color: map.get($colors, border);
      }

      .sf-radio-label::before {
        border-color: map.get($colors, border);
      }

      .sf-radio-label:hover .sf-ripple-container {
        background: map.get($colors, hover);
      }
    }
  }

}