@use 'sass:map';
@use '../base/colors';
@use '../base/typography';
@use '../base/opacity';

@mixin mx-radio-button-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark == true {
    $current-theme: colors.$mx-dark;
  }

  .mat-mdc-radio-button {
    .mdc-radio {
      &:hover {
        .mdc-radio__background:before {
          background-color: map.get($current-theme, onSurface);
        }
      }

      .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
        border-color: map.get($current-theme, onSurface) !important;
      }
      .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle,
      .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
        border-color: map.get($current-theme, primary) !important;
      }

      .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle,
      .mdc-radio__native-control:disabled:checked + .mdc-radio__background .mdc-radio__outer-circle,
      .mdc-radio__native-control:disabled + .mdc-radio__background .mdc-radio__inner-circle {
        border-color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38) !important;
      }

      &.mdc-radio--disabled {
        + label {
          color: rgba(map.get($current-theme, onSurface), opacity.$opacity-38);

          .mx-radio-button-hint {
            @extend .opacity-038;
          }

          // NOTE: This is a deprecated class, it will be removed in the future
          .mx-radio-button-hint--deprecated {
            color: rgba(map.get($current-theme, onSurfaceVariant), opacity.$opacity-38);
          }
        }
      }
    }

    &.mat-mdc-radio-checked {
      .mdc-radio {
        &:hover {
          .mdc-radio__background:before {
            background-color: map.get($current-theme, primary);
          }
        }
      }
    }

    .mdc-form-field label {
      color: map.get($current-theme, onSurface);
      .mx-radio-button-hint,
      // NOTE: This is a deprecated class, it will be removed in the future
      .mx-radio-button-hint--deprecated,
      .mat-icon {
        color: map.get($current-theme, onSurfaceVariant);
      }
    }
  }

  .gl-radio-group-label {
    color: map.get($current-theme, onSurfaceVariant);
  }

  .mx-radio-button-info-tooltip {
    .mat-icon {
      color: map.get($current-theme, onSurfaceVariant);
    }
  }
}

.mat-mdc-radio-button {
  @extend .gl-body-md;

  .mdc-form-field {
    align-items: start;
    label {
      padding-top: 10px;
      // NOTE: This is a deprecated class, it will be removed in the future
      .mx-radio-button-hint--deprecated,
      .mx-radio-button-hint {
        @extend .gl-body-sm;
        padding: 2px 0 4px;
      }
    }
  }

  .mdc-radio {
    &:hover {
      .mdc-radio__background:before {
        opacity: opacity.$opacity-8;
      }
    }

    &.mdc-radio--disabled {
      .mdc-radio__outer-circle,
      .mdc-radio__inner-circle {
        opacity: 1 !important;
      }
    }
  }
}

.mat-mdc-radio-group {
  display: flex;
  flex-wrap: wrap;
  padding: 4px;

  &.gl-radio-group-horizontal {
    flex-direction: row;

    .mat-mdc-radio-button {
      margin-right: 16px;
    }
  }

  &.gl-radio-group-vertical {
    flex-direction: column;

    .mat-mdc-radio-button ~ .mat-mdc-radio-button {
      margin-top: -4px;
    }
  }
}

.gl-radio-group-label {
  @extend .gl-body-sm;
}

/* mx-radio-button-tooltip */
.mx-radio-button-info-tooltip {
  display: inline-flex;

  &__hidden {
    display: none;
  }
}

.mx-radio-button-tooltip-wrapper {
  display: inline-flex;
  align-items: center;
  grid-gap: 6px;

  &__before {
    flex-direction: row-reverse;
    .mat-mdc-radio-button + .mx-radio-button-info-tooltip {
      margin-left: 0;
    }
  }

  .mat-icon {
    width: 16px;
    height: 16px;
  }
}