/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';

@radio-prefix-cls: ~'@{css-prefix}radio';

.@{radio-prefix-cls} {
  .component-css-vars-radio();

  color: var(--ti-radio-text-color);
  font-weight: 500;
  margin-right: var(--ti-radio-margin-right);
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  .user-select(none);

  &:last-child {
    margin-right: 0;
  }

  &.is-bordered {
    padding: var(--ti-radio-mini-bordered-padding-vertical) var(--ti-radio-mini-bordered-padding-horizontal);
    border-radius: var(--ti-radio-bordered-border-radius);
    border: 1px solid var(--ti-radio-bordered-border-color);
    box-sizing: border-box;
    height: var(--ti-radio-bordered-height);

    & + & {
      margin-left: var(--ti-radio-mini-bordered-margin-left);
    }

    &.is-checked {
      border-color: var(--ti-radio-bordered-checked-border-color);
    }

    &.is-disabled {
      cursor: not-allowed;
      border-color: var(--ti-radio-bordered-border-color);
    }
  }

  &,
  &__input {
    white-space: nowrap;
    line-height: 1;
    outline: 0;
  }

  &__input {
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    display: inline-block\9;

    // 兼容ie10-ie11
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      display: inline-block;
    }

    // 兼容edge
    @supports (-ms-ime-align: auto) {
      display: inline-block;
    }

    &.is-checked {
      .@{radio-prefix-cls}__inner {
        border-color: var(--ti-radio-bordered-checked-border-color);
        background: var(--ti-radio-bordered-checked-background-color);

        &::after {
          transform: translate(-50%, -50%) scale(1);
          background-color: var(--ti-radio-inner-checked-bg-color);
        }
      }
      &:hover .@{radio-prefix-cls}__inner::after {
        background-color: var(--ti-radio-inner-checked-hover-bg-color);
      }
      &:not(.is-disabled) {
        .@{radio-prefix-cls}__inner {
          &:hover {
            border-color: var(--ti-radio-bordered-checked-hover-border-color);
          }
        }
      }
    }

    &.is-disabled {
      .@{radio-prefix-cls}__inner {
        border-color: var(--ti-radio-input-disabled-border-color);

        &,
        &::after {
          cursor: not-allowed;
          background-color: var(--ti-radio-input-disabled-bg-color);
        }

        & + .@{radio-prefix-cls}__label {
          cursor: not-allowed;
        }
      }

      &.is-checked .@{radio-prefix-cls}__inner {
        background-color: var(--ti-radio-input-checked-disabled-bg-color);
        border-color: var(--ti-radio-input-checked-disabled-border-color);

        &::after {
          background-color: var(--ti-radio-inner-checked-disabled-bg-color);
        }
      }

      & + span.@{radio-prefix-cls}__label {
        color: var(--ti-radio-input-disabled-text-color);
        cursor: not-allowed;
      }
    }
  }

  &__inner {
    border: 1px solid var(--ti-radio-bordered-border-color);
    border-radius: 100%;
    width: var(--ti-radio-inner-width);
    height: var(--ti-radio-inner-height);
    background-color: var(--ti-radio-inner-bg-color);
    position: relative;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;

    &:hover {
      border-color: var(--ti-radio-bordered-hover-border-color);
    }

    &:active {
      border-color: var(--ti-radio-bordered-active-border-color);
    }

    &::after {
      width: var(--ti-radio-inner-size);
      height: var(--ti-radio-inner-size);
      border-radius: var(--ti-radio-inner-border-radius);
      background-color: var(--ti-radio-inner-bg-color);
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.15s ease-in;
    }
  }

  &__original {
    opacity: 0;
    outline: 0;
    position: absolute;
    z-index: -1;
    margin: 0;
    width: 0;
    height: 0;
  }

  &__label {
    font-size: var(--ti-radio-font-size);
    padding-left: 8px;
    vertical-align: middle;
  }

  &--medium {
    &.is-bordered {
      border-radius: var(--ti-radio-bordered-border-radius);
      height: var(--ti-radio-medium-height);

      .@{radio-prefix-cls}__inner {
        height: var(--ti-radio-medium-inner-height);
        width: var(--ti-radio-medium-inner-width);
      }

      .@{radio-prefix-cls}__label {
        font-size: var(--ti-radio-font-size);
      }
    }
  }

  &--small {
    &.is-bordered {
      border-radius: var(--ti-radio-bordered-border-radius);
      height: var(--ti-radio-small-height);

      .@{radio-prefix-cls}__inner {
        height: var(--ti-radio-small-inner-height);
        width: var(--ti-radio-small-inner-width);
      }

      .@{radio-prefix-cls}__label {
        font-size: var(--ti-radio-font-size);
      }
    }
  }

  &--mini {
    &.is-bordered {
      padding: var(--ti-radio-mini-bordered-padding-vertical) var(--ti-radio-mini-bordered-padding-horizontal);
      border-radius: var(--ti-radio-bordered-border-radius, 2px);
      height: var(--ti-radio-mini-height);
      line-height: calc(var(--ti-radio-mini-height) - 2px);

      .@{radio-prefix-cls}__inner {
        height: var(--ti-radio-mini-inner-height);
        width: var(--ti-radio-mini-inner-width);

        &::after {
          width: 4px;
          height: 4px;
        }
      }

      .@{radio-prefix-cls}__label {
        font-size: var(--ti-radio-font-size);
      }
    }
  }
  &.is-checked.is-display-only {
    visibility: visible;
    line-height: 1;

    .tiny-radio__input {
      padding: 0;
      display: none;
    }
    .tiny-radio__label {
      padding-left: 0;
    }
  }
  &.is-display-only {
    visibility: hidden;
  }

  &:focus:not(.is-focus):not(:active):not(.is-disabled) &__inner {
    box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
  }
}
