@use 'variables' as *;
@use '../xui';

@mixin theme() {
  xui-toggle {
    width: fit-content;
    line-height: 0;
  }

  .x-toggle {
    width: fit-content;
    display: inline-flex;
    position: relative;
    cursor: pointer;
    opacity: 0.8;

    @include xui.border-radius($border-radius);
    @include xui.focusable();

    &:hover {
      opacity: 1;
    }

    &-clip {
      clip-path: polygon(
        0 0,
        0 100%,
        calc(50% - 3.5px) 100%,
        calc(50% - 3.5px) 0,
        calc(50% + 3.5px) 0,
        calc(50% + 3.5px) 100%,
        100% 100%,
        100% 0,
        0 0
      );

      transform: rotate(45deg);

      .x-toggle-content {
        transform: rotate(-45deg);
      }
    }

    &-toggled {
      position: absolute;
      inset: 0 0 0 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .x-toggle-line {
        width: 100%;
        height: 3px;

        @include xui.border-radius($border-radius);
        background-color: var(--color-error-default);
        transform: rotate(-45deg);
      }
    }

    @each $name in xui.$color-variations {
      &-#{$name} {
        color: var(--color-#{$name}-default);
      }
    }

    &-disabled {
      color: xui.text-muted();
      cursor: not-allowed;
      opacity: 1;

      .x-toggle-line {
        background-color: xui.text-muted();
      }
    }
  }
}