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

@mixin theme() {
  .x-settings-dialog {
    width: 100%;
    height: 100%;
    padding: 0;

    position: fixed;
    inset: 0 0 0 0;
    z-index: 10000;
    border: 0;
    user-select: none;

    @include core.fill(primary);
  }

  .x-settings {
    width: 100%;
    height: 100%;
    display: flex;

    @include core.fill(primary);

    &-menu {
      flex: 1 0 220px;
      display: flex;
      justify-content: flex-end;
      @include core.fill(secondary);

      nav {
        width: 240px;
        display: flex;
        flex-direction: column;
        padding: 50px 5px 50px 20px;

        font-weight: 500;

        * {
          margin: 2px 10px;
        }

        &:focus {
          outline: none;
        }
      }

      &-item {
        padding: 0 8px;
        cursor: pointer;

        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 2rem;

        &:hover {
          background-color: core.modifier-hover();
        }

        &-active {
          background-color: core.modifier-active();
        }

        &-focus {
          outline: 5px solid var(--focus-color);
          z-index: 1;
        }

        @include core.border-radius($border-radius);
        @include core.typography-level(button);
      }

      &-category {
        font-family: var(--font-headline-1-family);
        font-weight: 700;
        font-size: 0.75rem;
        padding-left: 8px;
        pointer-events: none;
      }

      &-divider {
        height: 1px;
        margin: 12px;
        background-color: var(--color-bg-accent);
      }

      &-red {
        color: var(--color-error-default);
      }
    }

    &-right {
      flex: 1 1 800px;
      display: flex;
    }

    &-content {
      min-width: 400px;
      max-width: 60%;

      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: hidden auto;

      margin: 50px 40px 0 50px;
      @include scrollbar.regular();
    }

    &-close-anchor {
      flex: 0 0 40px;
    }

    &-close {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: fixed;
      top: 50px;

      cursor: pointer;
      color: oklch(var(--color-bg-primary-contrast-lch) / 0.4);

      font-size: 0.8rem;
      font-weight: 500;

      .x-icon {
        font-size: 50px;

        // needed to have rounded focusable outline
        border-radius: 50%;
        @include core.focusable();

        &:focus-visible {
          outline-offset: -4px;
        }
      }

      &:hover {
        color: var(--color-bg-primary-contrast);
      }
    }
  }
}