@use 'variables' as *;
@use '@xui/theme-core' as core;

@mixin theme() {
  .x-toggle {
    width: fit-content;
    display: inline-flex;
    position: relative;
    cursor: pointer;
    opacity: 0.8;
    line-height: 0;

    @include core.border-radius($border-radius);
    @include core.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 core.border-radius($border-radius);
        background-color: var(--color-error-default);
        transform: rotate(-45deg);
      }
    }

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

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

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