/* Label component styles and tokens */
@import (optional) url('../../../../components/input/radioset.less');
@import (optional) url('../../../../generated/variables/mobile/components/radioset.variant.less');
.wm-app {
  .app-radio {
    position: relative;

    &.radio {
      display: inline-block;

      >label {
        width: auto;
        display: inline-flex;
        padding: var(--wm-space-0);
        cursor: pointer;

        >input[type="radio"] {
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          margin: 0;
          position: absolute;
          left: 0px;
          border-radius: 50%;
          z-index: 1;
          cursor: pointer;


          &:checked {
            +.caption {
              &:after {
                transform: scale(1);
              }
            }
          }
        }

        .caption {
          display: inline-block;
          font-size: var(--wm-radiobutton-label-font-size);
          font-family: var(--wm-radiobutton-label-font-family);
          font-weight: var(--wm-radiobutton-label-font-weight);
          line-height: var(--wm-radiobutton-label-line-height);
          letter-spacing: var(--wm-radiobutton-label-letter-spacing);
          color: var(--wm-radiobutton-label-color);
          padding-left: ~"calc(40px + var(--wm-radiobutton-gap))";
          padding-top: ~"calc(calc(40px - var(--wm-radiobutton-label-line-height)) / 2)";

          &:before,
          &:after {
            content: "";
            display: inline-block;
            position: absolute;
          }

          &:before {
            width: var(--wm-radiobutton-size);
            height: var(--wm-radiobutton-size);
            left: ~"calc(calc(40px - var(--wm-radiobutton-size))/2)";
            top: ~"calc(calc(40px - var(--wm-radiobutton-size))/2)";
            background: var(--wm-radiobutton-background);
            border: var(--wm-radiobutton-border-width) solid var(--wm-radiobutton-border-color);
            border-radius: 50%;
            box-sizing: border-box;
          }

          &:after {
            top: ~"calc(calc(40px * 0.5) - calc(var(--wm-radiobutton-indicator-size) * 0.5))";
            left: ~"calc(calc(40px * 0.5) - calc(var(--wm-radiobutton-indicator-size) * 0.5))";
            width: var(--wm-radiobutton-indicator-size);
            height: var(--wm-radiobutton-indicator-size);
            transform: scale(0);
            transition: all 0.2s ease-in-out;
            background: var(--wm-radiobutton-color);
            border-radius: 50%;
          }
        }

        >img {
          display: none;
        }
      }
    }
  }

  .app-radioset {
    padding: 0;
    margin: 0;
    position: relative;

    &.list-group {
      display: flex;
      flex-wrap: nowrap;
      column-gap: var(--wm-radiobutton-set-item-column-gap);
      row-gap: var(--wm-radiobutton-set-item-row-gap);
      overflow: visible;

      >li {
        margin: 0;
      }

      &.inline {
        flex-wrap: wrap;

        >li {
          width: auto;

          +li {
            margin: 0;
          }
        }
      }
    }
  }
}