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

@mixin theme() {
  .x-drawer {
    width: 48px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;

    @include core.fill(primary);

    &-expanded {
      width: 260px;
    }

    &-item {
      height: 40px;
      display: flex;
      gap: 12px;
      align-items: center;

      cursor: pointer;
      padding-left: 12px;

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

    &-group {
      height: 48px;

      .x-icon {
        color: var(--color-primary-default);
      }
    }

    &-active {
      padding-left: 9px;
      border-left: 3px solid core.modifier-selected();

      background-color: oklch(var(--color-bg-accent-lch) / 0.2);
    }

    &-selected {
      padding-left: 9px;
      border-left: 3px solid var(--color-primary-default);

      background-color: oklch(var(--color-bg-accent-lch) / 0.4);
    }

    &-divider {
      width: 80%;
      margin: 8px 0;
      border-bottom: 2px solid core.modifier-accent();
    }

    &-header,
    &-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 8px 0;
    }
  }
}