//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

//-----------------------------
// Radio
//-----------------------------

@use "../../theme" as *;
@use "../../type";
@use "../form";
@use "../../utilities/focus-outline" as *;
@use "../../utilities/component-reset" as *;
@use "../../utilities/visually-hidden" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/rtl" as *;
@use "../../config" as *;
@use "../../spacing" as *;

/// @type Number
/// @access public
/// @group radio-button
$radio-border-width: 2px !default;

/// Radio button styles
/// @access private
/// @group radio-button
@mixin radio-button {
  .#{$prefix}--input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    width: 100%;
  }

  .#{$prefix}--input-group__vertical {
    .#{$prefix}--input-group-inside {
      flex-direction: column;
      > * {
        margin-bottom: $spacing-03 * 1.5;
      }
    }
  }

  .#{$prefix}--input-group-inside {
    display: flex;
    flex-wrap: wrap;
    //margin-top: $spacing-03;
    order: 2;
    width: 100%;
    > * {
      margin-right: $spacing-06;
      @include rtl {
        margin-left: $spacing-06;
        margin-right: 0;
      }
    }
    .#{$prefix}--form-item {
      flex: none;
    }
  }

  .#{$prefix}--radio-button {
    @include visually-hidden;
    visibility: unset;
  }

  .#{$prefix}--radio-button__label {
    @include type.type-style("body-short");
    @include type.font-family("sans");
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .#{$prefix}--radio-button__appearance {
    @include reset;
    background-color: $background-main;
    border-radius: 50%;
    border: $radio-border-width solid $field-background-disabled;
    flex-shrink: 0;
    height: calcRem(18px);
    width: calcRem(18px);
    margin-right: $spacing-03;
    @include rtl {
      margin-left: $spacing-03;
      margin-right: 0;
    }
  }

  .#{$prefix}--radio-button:checked
    + .#{$prefix}--radio-button__label
    .#{$prefix}--radio-button__appearance {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: $action-default-fill-primary-default;

    &:before {
      content: "";
      display: inline-block;
      position: relative;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: $action-default-fill-primary-default;
    }
  }

  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .#{$prefix}--radio-button:focus
    + .#{$prefix}--radio-button__label
    .#{$prefix}--radio-button__appearance {
    @include focus-outline("blurred");
  }

  // Skeleton State
  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
    @include skeleton;
    width: calcRem(100px);
    height: calcRem(18px);
  }

  .#{$prefix}--radio-button__label.#{$prefix}--skeleton
    .#{$prefix}--radio-button__appearance {
    display: none;
  }
}

@mixin radio-button--experimental {
  .#{$prefix}--input-group {
    display: flex;
    align-items: center;
    margin-top: $spacing-03;
  }

  .#{$prefix}--radio-button {
    @include hidden;
    visibility: unset;
  }

  .#{$prefix}--radio-button__label {
    @include type-style("label-02");
    @include font-family("sans");
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: $spacing-05;
  }

  .#{$prefix}--radio-button__appearance {
    @include reset;
    background-color: $background-main;
    border-radius: 50%;
    border: $radio-border-width solid $field-background-enabled;
    flex-shrink: 0;
    height: calcRem(18px);
    width: calcRem(18px);
    margin-right: $spacing-03;
  }

  .#{$prefix}--radio-button:checked
    + .#{$prefix}--radio-button__label
    .#{$prefix}--radio-button__appearance {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: $field-background-enabled;

    &:before {
      content: "";
      display: inline-block;
      position: relative;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: $border-inverse;
    }
  }

  // Disabled

  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
  [disabled] ~ _ {
    font-size: inherit;
  }

  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
    color: $disabled;
    cursor: not-allowed;
  }

  .#{$prefix}--radio-button:disabled
    + .#{$prefix}--radio-button__label
    .#{$prefix}--radio-button__appearance,
  .#{$prefix}--radio-button:disabled:checked
    + .#{$prefix}--radio-button__label
    .#{$prefix}--radio-button__appearance {
    border-color: $disabled;
  }

  // Focus  TODO:fix focus color

  .#{$prefix}--radio-button:focus
    + .#{$prefix}--radio-button__label
    .#{$prefix}--radio-button__appearance {
    @include focus-outline("blurred");
  }

  // Skeleton State
  .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
    @include skeleton;
    width: calcRem(100px);
    height: calcRem(18px);
  }

  .#{$prefix}--radio-button__label.#{$prefix}--skeleton
    .#{$prefix}--radio-button__appearance {
    display: none;
  }
}

// TODO
// @include exports('radio-button') {
//   @if feature-flag-enabled('components-x') {
//     @include radio-button--experimental;
//   } @else {
//     @include radio-button;
//   }
// }