.ui-option {
  --var-toogle-height: 1rem;
  display: inline-block;

  &__group {
    align-items: center;
    display: grid;
    grid-auto-rows: 2rem;
    grid-column: 1;
    grid-column-gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    justify-items: start;
  }

  &__toggle {
    border-radius: var(--var-toogle-height);
    cursor: pointer;
    font-size: 1rem;
    margin: 0 4px;
    opacity: 0.9;
    position: relative;
    height: var(--var-toogle-height);
    width: 2.4em;
    --toggle-on: "";
    --toggle-off: "";

    &::before {
      content: var(--toggle-off);
      font-size: 0.8em;
      line-height: var(--var-toogle-height);
      margin: auto;
      padding-inline: 4px;
      position: absolute;
      width: 100%;
      @include property-prefix(text-align, end);

      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    &::after {
      border-radius: calc(var(--var-toogle-height) + 4px);
      content: "";
      display: block;
      height: calc(var(--var-toogle-height) + 4px);
      left: -2px;
      top: -2px;
      position: relative;
      transition: left 0.2s;
      width: calc(var(--var-toogle-height) + 4px);
    }
  }

  &__control {
    align-items: normal;
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: auto 1fr auto;
    position: relative;
    cursor: pointer;

    &.outside {
      grid-template-columns: 1fr auto 1fr;
    }
    > span {
      line-height: 1.25rem;
      white-space: normal;

      &:empty {
        display: none;
      }
    }

    > .ui-icon {
      font-size: 1.25rem;
    }

    > input {
      @include position(absolute, 0);
      cursor: pointer;
      opacity: 0;
      z-index: 2;

      ~ .ui-icon:first-of-type {
        display: block;
      }

      ~ .ui-icon:last-of-type {
        display: none;
      }

      ~ .ui-icon:nth-of-type(2) {
        display: none;
      }

      &[data-checked="__2__"] {
        ~ .ui-icon:first-of-type {
          display: none;
        }

        ~ .ui-icon:last-of-type {
          display: none;
        }

        ~ .ui-icon:nth-of-type(2) {
          display: block;
        }
      }

      &:checked {
        ~ .ui-icon:first-of-type {
          display: none;
        }

        ~ .ui-icon:last-of-type {
          display: block;
        }

        ~ .ui-option__toggle {
          &::before {
            content: var(--toggle-on);
            @include property-prefix(text-align, start);
          }

          &::after {
            left: calc(100% - var(--var-toogle-height));
          }

          @at-root [dir="rtl"] &::after {
            left: calc(-100% + 1em);
          }
        }
      }
    }
  }

  &[data-disabled="true"] {
    cursor: not-allowed;

    label {
      opacity: 0.4;
      pointer-events: none;
    }
  }
}

ui-radio {
  .ui-option__control {
    column-gap: 0;
  }
}
