@use "../../settings/constants";

@mixin horizontal {
  &--direction-horizontal {
    @media screen and (min-width: constants.$breakpoint-desktop) {
      @content;
    }
  }
  &--direction-horizontal:not(#{&}--direction-responsive) {
    @content;
  }
}

@mixin vertical {
  &--direction-vertical {
    @content;
  }

  &--direction-responsive#{&}--direction-horizontal {
    @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
      @content;
    }
  }
}

@mixin theme($theme) {
  @at-root {
    .view--#{$theme} & {
      @content;
    }

    @media screen and (prefers-color-scheme: $theme) {
      @content;
    }
  }
}

.mykn-toolbar {
  --typography-color-link: var(--typography-color-body);

  $self: &;
  background-color: var(--toolbar-default-background);
  color: var(--toolbar-default-text);
  box-sizing: border-box;
  column-gap: var(--sizes-spacing-xs-h);
  display: flex;
  flex-direction: column;
  max-height: 100cqh;
  justify-content: flex-start;
  row-gap: var(--sizes-spacing-xs-v);
  text-align: start;
  width: fit-content;
  z-index: 10;

  &--compact {
    gap: 0;
  }

  &--justify-h {
    width: 100%;
  }

  &--justify-v {
    height: 100cqh;
  }

  &--pad-a .mykn-a {
    box-sizing: border-box;
    padding: var(--sizes-spacing-xs-v) var(--sizes-spacing-xs-h);
  }

  &--pad-h {
    padding-inline: var(--sizes-spacing-xs-h);
  }

  &--pad-size-xs#{&}--pad-h {
    padding-inline: calc(var(--sizes-spacing-xs-h) / 2);
  }

  &--pad-v {
    padding-block: var(--sizes-spacing-xs-v);
  }

  &--pad-size-xs-#{&}--pad-v {
    padding-inline: calc(var(--sizes-spacing-xs-v) / 2);
  }

  &--variant-primary {
    background-color: var(--toolbar-primary-background);
    color: var(--toolbar-primary-text);

    @include theme(light) {
      & > *:not(.mykn-dropdown, .mykn-iconinitials) {
        --typography-color-body: var(--toolbar-primary-text);
        --typography-color-link: var(--toolbar-primary-text);
        --typography-color-h: var(--toolbar-primary-text);
      }

      & > .mykn-button--variant-transparent:not(:focus, :hover),
      & > .mykn-dropdown .mykn-button--variant-transparent:not(:focus, :hover) {
        --mykn-button-color-text: var(--toolbar-primary-text);
      }
    }
  }

  &--variant-accent {
    background-color: var(--toolbar-accent-background);
    color: var(--toolbar-accent-text);
  }

  &--variant-alt {
    background-color: var(--toolbar-alternate-background);
    color: var(--toolbar-alternate-text);
  }

  @include horizontal {
    &#{$self}--variant-alt {
      //border-block: 1px solid var(--typography-color-border);
    }
  }
  @include vertical {
    &#{$self}--variant-alt {
      //border-inline: 1px solid var(--typography-color-border);
    }
  }

  &--variant-transparent {
    background-color: var(--toolbar-transparent-background);
    color: var(--toolbar-transparent-text);
  }

  &--size-fit-content {
    width: fit-content;
  }

  &--sticky-top {
    position: sticky;
    top: 0;
  }

  &--sticky-bottom {
    position: sticky;
    bottom: 0;
  }

  &__spacer {
    height: 100%;
    flex-shrink: 9999;
  }

  .mykn-logo--abbreviated {
    width: 34px;
  }

  .mykn-a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .mykn-h1,
  .mykn-h2,
  .mykn-h3 {
    margin-block-end: 0 !important;
  }

  // Horizontal layout (desktop only).
  @include horizontal {
    align-items: center;
    flex-direction: row;
    max-height: 100%;

    &#{$self}--align-start {
      justify-content: start;
      text-align: start;
    }

    &#{$self}--align-center {
      justify-content: center;
      text-align: center;
    }

    &#{$self}--align-end {
      justify-content: end;
      text-align: end;
    }

    &#{$self}--align-space-between {
      justify-content: space-between;
      text-align: center;
    }

    #{$self}__spacer {
      width: 100%;
    }

    .mykn-p:has(+ .mykn-p) {
      margin-block-end: 0;
    }
  }

  // Horizontal on mobile.
  &--direction-responsive#{&}--direction-horizontal {
    @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
      #{$self}__spacer {
        display: none;
      }
    }
  }

  // Vertical layout (explicit or via direction-responsive).
  @include vertical() {
    &__spacer {
      height: 100%;
    }

    .mykn-a,
    .mykn-button,
    .mykn-dropdown,
    .mykn-form-control,
    .mykn-input,
    .mykn-select,
    .mykn-stackctx {
      width: 100%;
    }

    .mykn-iconinitials {
      align-self: center;
    }
  }

  // Vertical on desktop.
  @media screen and (min-width: constants.$breakpoint-desktop) {
    @include vertical {
      &#{$self}--align-start {
        align-items: start;
        justify-content: start;
        text-align: start;
      }

      &#{$self}--align-end {
        align-items: end;
        justify-content: end;
        text-align: end;
      }

      &#{$self}--align-center {
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      &--align-space-between {
        align-items: center;
        justify-content: space-between;
        text-align: center;
      }

      &#{$self}--align-start .mykn-a,
      &#{$self}--align-start .mykn-button,
      &#{$self}--align-start .mykn-dropdown {
        display: flex;
        justify-content: start;
        text-align: start;
      }

      &#{$self}--align-end .mykn-a,
      &#{$self}--align-end .mykn-button,
      &#{$self}--align-end .mykn-dropdown {
        display: flex;
        justify-content: end;
        text-align: end;
      }
    }
  }
}