@use 'sass:color';

$radio-btn-background-color: $neutral-white !default;
$radio-btn-border: 2px solid !default;
$radio-btn-border-color: $neutral-tertiary !default;
$radio-btn-bigger-font-size: 15px !default;
$radio-btn-bigger-height: 22px !default;
$radio-btn-bigger-line-height: 22px !default;
$radio-btn-bigger-padding: 32px !default;
$radio-btn-bigger-ripple-size: 48px !default;
$radio-btn-bigger-small-height: 18px !default;
$radio-btn-bigger-small-line-height: 18px !default;
$radio-btn-bigger-small-padding: 28px !default;
$radio-btn-bigger-small-width: 18px !default;
$radio-btn-bigger-width: 22px !default;
$radio-btn-checked-border-color: $theme-primary !default;
$radio-btn-checked-color: $theme-primary !default;
$radio-btn-checked-background-color: $radio-btn-background-color !default;
$radio-btn-check-transition: none !default;
$radio-btn-disabled-border-color: $neutral-tertiary-alt !default;
$radio-btn-disabled-color: $neutral-tertiary-alt !default;
$radio-btn-disabled-checked-color: $theme-primary !default;
$radio-btn-disabled-checked-border-color: $radio-btn-disabled-border-color !default;
$radio-btn-disabled-background-color: transparent !default;
$radio-btn-font-color: $neutral-light-font !default;
$radio-btn-font-size: 14px !default;
$radio-btn-focussed-box-shadow: none !default;
$radio-btn-hover-bgcolor: $neutral-white !default;
$radio-btn-hover-border-color: $neutral-secondary-alt !default;
$radio-btn-hover-check-bg-color: $theme-dark-alt !default;
$radio-btn-hover-check-border-color: $theme-dark-alt !default;
$radio-btn-height: 20px !default;
$radio-btn-width: 20px !default;
$radio-btn-small-height: 14px !default;
$radio-btn-small-width: 14px !default;
$radio-btn-icon-left: 6px !default;
$radio-btn-icon-top: 6px !default;
$radio-btn-icon-right: 6px !default;
$radio-btn-small-icon-left: 4px !default;
$radio-btn-small-icon-top: 4px !default;
$radio-btn-small-icon-right: 4px !default;
$radio-btn-bigger-icon-left: 6px !default;
$radio-btn-bigger-icon-top: 6px !default;
$radio-btn-bigger-icon-right: 6px !default;
$radio-btn-bigger-small-icon-left: 5px !default;
$radio-btn-bigger-small-icon-top: 5px !default;
$radio-btn-bigger-small-icon-right: 5px !default;
$radio-btn-icon-height: 8px !default;
$radio-btn-icon-width: 8px !default;
$radio-btn-small-icon-height: 6px !default;
$radio-btn-small-icon-width: 6px !default;
$radio-btn-bigger-icon-height: 10px !default;
$radio-btn-bigger-icon-width: 10px !default;
$radio-btn-bigger-small-icon-height: 8px !default;
$radio-btn-bigger-small-icon-width: 8px !default;
$radio-btn-line-height: 20px !default;
$radio-btn-padding-left: 28px !default;
$radio-btn-small-line-height: 14px !default;
$radio-btn-small-padding: 22px !default;
$radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
$radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
$radio-btn-focus-outline: $neutral-secondary-alt 1px solid !default;
$radio-btn-focus-outline-offset: 2px !default;
$radio-btn-ripple-position: -8px !default;
$radio-btn-ripple-bgcolor:  rgba(0, 0, 0, .3) !default;
$radio-btn-ripple-size: 34px !default;
$radio-btn-small-ripple-position: -10px !default;
$radio-btn-bigger-ripple-position: -11px !default;
$radio-btn-bigger-small-ripple-size: 36px !default;
$radio-btn-focus-ripple-bgcolor: #000 !default;
$radio-btn-checked-ripple-bgcolor: #ff4081 !default;
$radio-btn-zero-padding: 0 !default;
$radio-button-border-radius: 50% !default;
$radio-label-font-weight: normal !default;
$radio-btn-after-border: 1px solid !default;
$radio-btn-wrapper-line-height: 1 !default;
$radio-btn-radio-height: 1px !default;
$radio-btn-radio-width: 1px !default;
$radio-ripple-left: -10px !default;
$radio-auto-position: auto !default;
$radio-ripple-rtl-container-left: -12px !default;
$radio-nrml-ripple-rtl-container-left: -8px !default;
$radio-btn-border-error-color: $msg-danger-border-color-alt1;

@mixin fluent-focus-border {
  @if $skin-name == 'FluentUI' {
    border: 1px solid transparent;
  }
}

@mixin fluent-label-border {
  @if $skin-name == 'FluentUI' {
    border: 1px solid $radio-btn-border-color;
  }
}

@include export-module('radiobutton-layout') {
  .e-radio-wrapper {
    display: inline-block;
    line-height: $radio-btn-wrapper-line-height;
    position: relative;
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-radio {
    -webkit-appearance: none;
    height: $radio-btn-radio-height;
    opacity: 0;
    position: absolute;
    width: $radio-btn-radio-width;

    &:not(:checked):not(:disabled):hover {
      +label,
      +label.e-rtl,
      +label.e-right {
        @if $skin-name == 'FluentUI' {
          &::after {
            background-color: $radio-btn-uncheck-background-color;
            border: 1px solid;
            border-radius: 50%;
            box-sizing: border-box;
            color: $radio-btn-uncheck-color;
            content: '';
            height: $radio-btn-icon-height;
            left: $radio-btn-icon-left;
            position: absolute;
            top: $radio-btn-icon-top;
            transform: scale(1);
            width: $radio-btn-icon-width;
          }
        }
      }

      +label.e-rtl,
      +label.e-right {
        &::after {
          left: $radio-auto-position;
        }
      }
    }

    &:focus-visible {
      +label {
        @if $skin-name == 'fluent2' {
          box-shadow: $switch-box-shadow;
          border-radius: $radio-focus-border-radius;
        }
      }
    }

    +label {
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      display: inline-block;
      margin: $radio-btn-zero-padding;
      position: relative;
      user-select: none;
      vertical-align: middle;
      white-space: nowrap;
      @if $skin-name == 'FluentUI' {
        border: 1px solid transparent;
        height: 24px;
      }
      @if $skin-name == 'fluent2' {
        margin: $radio-btn-focus-margin;
      }

      & .e-label {
        display: inline-block;
        font-family: $font-family;
        font-size: $radio-btn-font-size;
        font-weight: $radio-label-font-weight;
        line-height: $radio-btn-line-height;
        padding-left: $radio-btn-padding-left;
        vertical-align: text-top;
        white-space: normal;
      }

      &:focus,
      &.e-focus {
        @include fluent-focus-border;
      }

      &::before {
        border: $radio-btn-border;
        border-radius: $radio-button-border-radius;
        box-sizing: border-box;
        content: '';
        height: $radio-btn-height;
        @if $skin-name == 'FluentUI' {
          left: 1px;
          top: 1px;
        }
        @else {
          left: $radio-btn-zero-padding;
        }
        position: absolute;
        width: $radio-btn-width;
      }

      &:focus {
        &::before {
          box-shadow: $radio-btn-focussed-box-shadow;
          @if $skin-name == 'bootstrap5.3' {
            border-color: $border-selected;
          }
        }
      }

      &:active {
        &::before {
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $radio-btn-focussed-box-shadow;
            border-color: $border-selected !important; /* stylelint-disable-line declaration-no-important */
            background-color: $content-bg-color-pressed;
          }
          @if $skin-name == 'tailwind3' {
            box-shadow: $radio-btn-focussed-box-shadow;
          }
        }
      }

      &::after {
        border: $radio-btn-after-border;
        border-radius: $radio-button-border-radius;
        box-sizing: border-box;
        content: '';
        height: $radio-btn-icon-height;
        left: $radio-btn-icon-left;
        position: absolute;
        top: $radio-btn-icon-top;
        transform: scale(0);
        width: $radio-btn-icon-width;
      }

      & .e-ripple-container {
        border-radius: $radio-button-border-radius;
        height: $radio-btn-ripple-size;
        left: $radio-btn-ripple-position;
        position: absolute;
        top: $radio-btn-ripple-position;
        width: $radio-btn-ripple-size;
        z-index: 1;

        & .e-ripple-element {
          @if $skin-name == 'Material3' {
            border-radius: $radio-btn-ripple-border-radius;
          }
        }
      }

      &.e-right,
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-zero-padding;
          padding-right: $radio-btn-padding-left;
        }

        &::before {
          left: $radio-auto-position;
          right: $radio-btn-zero-padding;
        }

        &::after {
          left: $radio-auto-position;
          right: $radio-btn-icon-right;
        }

        & .e-ripple-container {
          left: $radio-auto-position;
          right: $radio-btn-ripple-position;
        }
      }

      &.e-right {
        &.e-rtl {
          & .e-label {
            padding-left: $radio-btn-padding-left;
            padding-right: $radio-btn-zero-padding;
          }

          &::before {
            left: $radio-btn-zero-padding;
            right: $radio-auto-position;
          }

          &::after {
            left: $radio-btn-icon-right;
            right: $radio-auto-position;
          }

          & .e-ripple-container {
            left: $radio-nrml-ripple-rtl-container-left;
            right: $radio-auto-position;
          }
        }
      }

      &.e-small {

        & .e-label {
          line-height: $radio-btn-small-line-height;
          padding-left: $radio-btn-small-padding;
        }

        &::before {
          height: $radio-btn-small-height;
          width: $radio-btn-small-width;
        }

        &::after {
          height: $radio-btn-small-icon-height;
          left: $radio-btn-small-icon-left;
          top: $radio-btn-small-icon-top;
          width: $radio-btn-small-icon-width;
        }

        & .e-ripple-container {
          left: $radio-btn-small-ripple-position;
          top: $radio-btn-small-ripple-position;
        }

        &.e-right,
        &.e-rtl {
          & .e-label {
            padding-left: $radio-btn-zero-padding;
            padding-right: $radio-btn-small-padding;
          }

          &::after {
            left: $radio-auto-position;
            right: $radio-btn-small-icon-right;
          }

          & .e-ripple-container {
            left: $radio-auto-position;
            right: $radio-btn-small-ripple-position;
          }
        }

        &.e-right {
          &.e-rtl {
            & .e-label {
              padding-left: $radio-btn-small-padding;
              padding-right: $radio-btn-zero-padding;
            }

            &::after {
              left: $radio-btn-small-icon-right;
              right: $radio-auto-position;
            }

            & .e-ripple-container {
              left: $radio-ripple-left;
              right: $radio-auto-position;
            }
          }
        }
      }
    }

    &:focus,
    .e-focus {
      +label,
      & .e-label {
        @include fluent-label-border;
      }
    }

    &:focus:not(:focus-visible) {
      +label,
      & .e-label {
        @include fluent-focus-border;
      }
    }

    &:focus-visible {
      +label,
      & .e-label {
        @include fluent-label-border;
      }
    }

    &:checked {
      +label {
        &::after {
          transform: scale(1);
          transition: $radio-btn-check-transition;
        }
      }
    }
  }

  .e-small .e-radio + label,
  .e-radio + label.e-small {
    @if $skin-name == 'fluent2' {
      margin: $radio-small-btn-label-margin;
    }
    & .e-label {
      line-height: $radio-btn-small-line-height;
      padding-left: $radio-btn-small-padding;
      @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
        font-size: $text-xs;
      }
    }

    &::before {
      height: $radio-btn-small-height;
      width: $radio-btn-small-width;
    }

    &::after {
      height: $radio-btn-small-icon-height;
      left: $radio-btn-small-icon-left;
      top: $radio-btn-small-icon-top;
      width: $radio-btn-small-icon-width;
    }

    & .e-ripple-container {
      left: $radio-btn-small-ripple-position;
      top: $radio-btn-small-ripple-position;
    }

    &.e-right,
    &.e-rtl {
      & .e-label {
        padding-left: $radio-btn-zero-padding;
        padding-right: $radio-btn-small-padding;
      }

      &::after {
        left: $radio-auto-position;
        right: $radio-btn-small-icon-right;
      }

      & .e-ripple-container {
        left: $radio-auto-position;
        right: $radio-btn-small-ripple-position;
      }
    }

    &.e-right {
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-small-padding;
          padding-right: $radio-btn-zero-padding;
        }

        &::after {
          left: $radio-btn-small-icon-right;
          right: $radio-auto-position;
        }

        & .e-ripple-container {
          left: $radio-ripple-left;
          right: $radio-auto-position;
        }
      }
    }
  }
  .e-radio-wrapper.e-error .e-radio + label::before {
    border-color: $radio-btn-border-error-color;
  }
}

@include export-module('radiobutton-theme') {
  .e-radio {
    +label {
      &::before {
        background-color: $radio-btn-background-color;
        border-color: $radio-btn-border-color;
      }

      &.e-focus {
        & .e-ripple-container {
          background-color: $radio-btn-focus-ripple-bgcolor;
        }
      }

      & .e-label {
        color: $radio-btn-font-color;
      }

      & .e-ripple-element {
        background-color: $radio-btn-checked-ripple-bgcolor;
      }

      &:active {
        & .e-ripple-element {
          background-color: $radio-btn-ripple-bgcolor;
        }
      }
    }

    &:focus {
      +label {
        &::before {
          border-color: $radio-btn-focus-check-border-color;
          box-shadow: $radio-btn-focussed-box-shadow;
        }

        & .e-ripple-container {
          @if $skin-name == 'Material3' {
            background-color: $radio-btn-focus-ripple-bgcolor;
          }
        }
      }
    }

    &:focus {
      +label {
        &::before {
          border-color: $radio-btn-hover-border-color;
          box-shadow: $radio-btn-focussed-box-shadow;
        }
      }
    }

    &:hover {
      +label {
        & .e-ripple-container {
          @if $skin-name == 'Material3' {
            background: $radio-btn-ripple-bgcolor;
          }
        }
      }

      +label {
        &::before {
          border-color: $radio-btn-hover-border-color;
        }
      }
    }

    &:checked {
      +label {
        &::before {
          background-color: $radio-btn-checked-background-color;
          border-color: $radio-btn-checked-border-color;
        }

        &::after {
          background-color: $radio-btn-checked-color;
          color: $radio-btn-checked-color;
        }

        &:active {
          & .e-ripple-element {
            background-color: $radio-btn-checked-ripple-bgcolor;
          }
        }
      }

      +.e-focus {
        & .e-ripple-container {
          background-color: $radio-btn-checked-ripple-bgcolor;
        }

        &::before {
          outline: $radio-btn-focus-outline;
          outline-offset: $radio-btn-focus-outline-offset;
        }
      }
    }

    &:checked {
      &:focus {
        +label {
          &::before {
            border-color: $radio-btn-focus-check-border-color;
          }

          &::after {
            background-color: $radio-btn-focus-check-bg-color;
            @if $skin-name == 'fluent2' {
              color: $radio-btn-focus-check-bg-color;
            }
          }
        }
      }

      +label {
        &:hover {
          & .e-ripple-container {
            @if $skin-name == 'Material3' {
              background: $radio-btn-checked-ripple-bgcolor;
            }
          }
          &::before {
            border-color: $radio-btn-hover-check-border-color;
          }

          &::after {
            background-color: $radio-btn-hover-check-bg-color;
            @if $skin-name == 'fluent2' {
              color: $radio-btn-hover-check-bg-color;
            }
          }
        }
      }
    }

    &:disabled {
      +label {
        cursor: default;
        pointer-events: none;
        @if $skin-name == 'bootstrap5.3' {
          opacity: .5;
        }

        &::before {
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
            background-color: $radio-btn-disabled-not-checked-bg-color;
          }
          @else {
            background-color: $radio-btn-disabled-background-color;
          }
          border-color: $radio-btn-disabled-border-color;
          cursor: default;
        }

        & .e-ripple-container {
          background-color: transparent;

          &::after {
            background-color: transparent;
            cursor: default;
          }
        }

        & .e-label {
          color: $radio-btn-disabled-color;
        }
      }

      &:checked {
        +label {
          &::before {
            background-color: $radio-btn-disabled-background-color;
            border-color: $radio-btn-disabled-checked-border-color;
          }

          &::after {
            background-color: $radio-btn-disabled-checked-color;
            border-color: $radio-btn-disabled-checked-color;
            cursor: default;
          }

          & .e-ripple-container,
          & .e-ripple-container::after {
            background-color: transparent;
          }
        }
      }
    }
  }
}