@use 'variables' as *;
@use '@xui/theme-core' as core;
@use '../mixins/input-base';

@mixin theme() {
  xui-date-picker {
    width: fit-content;
  }

  .x-datepicker {
    @include core.focusable();
    @include input-base.input($border-radius, $color-variable);

    .x-icon {
      font-size: 20px;
    }

    &-popup {
      width: fit-content;
      display: flex;
      flex-direction: column;
      user-select: none;

      border: 1px solid var(--color-bg-secondary-alt);
      padding: 16px;

      @include core.border-radius($border-radius);
      @include core.fill(primary);
      @include core.elevate(medium);
    }

    &-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      margin: 4px 8px 16px 8px;
      font-weight: 500;
    }

    &-button {
      display: flex;
      cursor: pointer;
      border: 1px solid var(--color-bg-tertiary);

      @include core.border-radius($border-radius);
      @include core.fill(secondary);
      @include core.focusable();

      .x-icon {
        font-size: 16px;
      }
    }

    &-title {
      display: flex;

      margin-bottom: 8px;
      border-top: 1px solid var(--color-bg-tertiary);

      @include core.typography-level(overline);

      div {
        width: 41px;
        display: flex;
        justify-content: center;
      }
    }

    &-calendar {
      display: grid;
      grid-template-columns: repeat(7, 40px);
      gap: 1px;

      overflow: hidden;
      border: 1px solid var(--color-bg-tertiary);

      @include core.border-radius($border-radius);
      @include core.fill(tertiary);
      @include core.typography-level(overline);
    }

    &-day {
      height: 40px;
      display: grid;
      place-items: center;
      cursor: pointer;

      @include core.fill(primary);

      &:hover:not(.x-datepicker--disabled) {
        @include core.fill(default, primary);
      }

      &.x-datepicker--selected {
        border-bottom: 3px solid var(--color-primary-default);
      }

      &.x-datepicker--focused {
        outline: 1px solid var(--color-primary-default);
        outline-offset: -1px;

        &:not(.x-datepicker--selected) {
          @include core.fill(default, primary);
        }
      }

      &.x-datepicker--outside {
        background-color: var(--color-bg-secondary);
        color: core.text-muted();
      }

      &.x-datepicker--disabled {
        cursor: not-allowed;
        color: core.text-muted();
        background-color: var(--color-bg-secondary);

        @include core.disabled();
      }
    }
  }
}