/* Button element!
 *
 * Size: xsmall, small, medium, large
 * Skin: primary, secondary, tertiary
 * State: normal, focus, hover, active, disabled
 * Variant: label-only, icon-left, icon-right, icon-only
 * Background: light, dark
 */

@use 'sass:map';
@use 'sass:selector';
@use '../abstracts/functions';
@use '../abstracts/variables';
@use '../abstracts/placeholders';
@use '../abstracts/mixins/typography';

pkt-button {
  display: inline-block;

  &[full-width] {
    display: block;
  }
}

$-module-name: 'pkt-btn';
$-border-width: 2px;
$-sizes: (
  'medium': (
    'text-class': 'pkt-txt-18-medium',
    'padding-inline': 1rem,
    'padding-icon-only': 0 0.625rem,
    'icon-size': 1.5rem,
    'height': 3rem,
    'line-height': 1.1,
  ),
  'xsmall': (
    'text-class': 'pkt-txt-14-medium',
    'padding-inline': 0.75rem,
    'padding-icon-only': 0 0.4375rem,
    'icon-size': 1.125rem,
    'height': 2.25rem,
    'line-height': 1.1,
  ),
  'small': (
    'text-class': 'pkt-txt-16-medium',
    'padding-inline': 1rem,
    'padding-icon-only': 0 0.5625rem,
    'icon-size': 1.25rem,
    'height': 2.625rem,
    'line-height': 1.1,
  ),

  'large': (
    'text-class': 'pkt-txt-24-medium',
    'padding-inline': 1rem,
    'padding-icon-only': 0 0.875rem,
    'icon-size': 2rem,
    'height': 4rem,
    'line-height': 1.1,
  ),
);

$-skins: (
  'primary': (
    'light': (
      'button-background-normal': --pkt-color-button-primary-background-normal,
      'button-border-normal': --pkt-color-brand-dark-blue-1000,
      'button-text-normal': --pkt-color-button-primary-text-normal,
      'button-background-focus': --pkt-color-button-primary-background-focus,
      'button-border-focus': --pkt-color-button-primary-border-focus,
      'button-text-focus': --pkt-color-button-primary-text-focus,
      'border-states-focus': --pkt-color-brand-purple-1000,
      'button-background-hover': --pkt-color-button-primary-background-hover,
      'button-border-hover': --pkt-color-brand-warm-blue-1000,
      'button-text-hover': --pkt-color-button-primary-text-hover,
      'button-background-active': --pkt-color-button-primary-background-active,
      'button-border-active': --pkt-color-brand-warm-blue-1000,
      'button-text-active': --pkt-color-button-primary-text-active,
      'button-background-disabled': --pkt-color-button-primary-background-disabled,
      'button-border-disabled': --pkt-color-button-primary-background-disabled,
      'button-text-disabled': --pkt-color-button-primary-text-disabled,
    ),
    'dark': (
      'button-background-normal': --pkt-color-button-primary-background-normal,
      'button-border-normal': --pkt-color-brand-blue-500,
      'button-text-normal': --pkt-color-button-primary-text-normal,
      'button-background-focus': --pkt-color-button-primary-background-focus,
      'button-border-focus': --pkt-color-button-primary-border-focus,
      'button-text-focus': --pkt-color-button-primary-text-focus,
      'border-states-focus': --pkt-color-brand-purple-1000,
      'button-background-hover': --pkt-color-button-primary-background-hover,
      'button-border-hover': --pkt-color-brand-blue-1000,
      'button-text-hover': --pkt-color-button-primary-text-hover,
      'button-background-active': --pkt-color-button-primary-background-active,
      'button-border-active': --pkt-color-brand-blue-1000,
      'button-text-active': --pkt-color-button-primary-text-active,
      'button-background-disabled': --pkt-color-button-primary-background-disabled,
      'button-border-disabled': --pkt-color-button-primary-background-disabled,
      'button-text-disabled': --pkt-color-button-primary-text-disabled,
    ),
  ),
  'secondary': (
    'light': (
      'button-background-normal': --pkt-color-brand-neutrals-transparent,
      'button-border-normal': --pkt-color-button-secondary-border-normal,
      'button-text-normal': --pkt-color-button-secondary-text-normal,
      'button-background-focus': --pkt-color-brand-neutrals-transparent,
      'button-border-focus': --pkt-color-button-secondary-border-focus,
      'button-text-focus': --pkt-color-button-secondary-text-focus,
      'border-states-focus': --pkt-color-brand-purple-1000,
      'button-background-hover': --pkt-color-button-secondary-background-hover,
      'button-border-hover': --pkt-color-button-secondary-border-hover,
      'button-text-hover': --pkt-color-button-secondary-text-hover,
      'button-background-active': --pkt-color-button-secondary-background-active,
      'button-border-active': --pkt-color-button-secondary-border-active,
      'button-text-active': --pkt-color-button-secondary-text-active,
      'button-background-disabled': --pkt-color-brand-neutrals-transparent,
      'button-border-disabled': --pkt-color-button-secondary-border-disabled,
      'button-text-disabled': --pkt-color-button-secondary-text-disabled,
    ),
    'dark': (
      'button-background-normal': --pkt-color-brand-neutrals-transparent,
      'button-border-normal': --pkt-color-button-secondary-border-normal,
      'button-text-normal': --pkt-color-button-secondary-text-normal,
      'button-background-focus': --pkt-color-brand-neutrals-transparent,
      'button-border-focus': --pkt-color-button-secondary-border-focus,
      'button-text-focus': --pkt-color-button-secondary-text-focus,
      'border-states-focus': --pkt-color-brand-purple-1000,
      'button-background-hover': --pkt-color-button-secondary-background-hover,
      'button-border-hover': --pkt-color-button-secondary-border-hover,
      'button-text-hover': --pkt-color-button-secondary-text-hover,
      'button-background-active': --pkt-color-button-secondary-background-active,
      'button-border-active': --pkt-color-button-secondary-border-active,
      'button-text-active': --pkt-color-button-secondary-text-active,
      'button-background-disabled': --pkt-color-brand-neutrals-transparent,
      'button-border-disabled': --pkt-color-button-secondary-border-disabled,
      'button-text-disabled': --pkt-color-button-secondary-text-disabled,
    ),
  ),
  'tertiary': (
    'light': (
      'button-background-normal': --pkt-color-brand-neutrals-transparent,
      'button-border-normal': --pkt-color-brand-neutrals-transparent,
      'button-text-normal': --pkt-color-button-tertiary-text-normal,
      'button-background-focus': --pkt-color-button-tertiary-background-focus,
      'button-border-focus': --pkt-color-button-tertiary-border-focus,
      'button-text-focus': --pkt-color-button-tertiary-text-focus,
      'border-states-focus': --pkt-color-brand-purple-1000,
      'button-background-hover': --pkt-color-button-tertiary-background-hover,
      'button-border-hover': --pkt-color-button-tertiary-background-hover,
      'button-text-hover': --pkt-color-button-tertiary-text-hover,
      'button-background-active': --pkt-color-button-tertiary-background-active,
      'button-border-active': --pkt-color-button-tertiary-background-active,
      'button-text-active': --pkt-color-button-tertiary-text-active,
      'button-background-disabled': --pkt-color-button-tertiary-background-disabled,
      'button-border-disabled': --pkt-color-button-tertiary-background-disabled,
      'button-text-disabled': --pkt-color-button-tertiary-text-disabled,
    ),
    'dark': (
      'button-background-normal': --pkt-color-brand-neutrals-transparent,
      'button-border-normal': --pkt-color-brand-neutrals-transparent,
      'button-text-normal': --pkt-color-button-tertiary-text-normal,
      'button-background-focus': --pkt-color-button-tertiary-background-focus,
      'button-border-focus': --pkt-color-button-tertiary-border-focus,
      'border-states-focus': --pkt-color-brand-purple-1000,
      'button-text-focus': --pkt-color-button-tertiary-text-focus,
      'button-background-hover': --pkt-color-button-tertiary-background-hover,
      'button-border-hover': --pkt-color-button-tertiary-background-hover,
      'button-text-hover': --pkt-color-button-tertiary-text-hover,
      'button-background-active': --pkt-color-button-tertiary-background-active,
      'button-border-active': --pkt-color-button-tertiary-background-active,
      'button-text-active': --pkt-color-button-tertiary-text-active,
      'button-background-disabled': --pkt-color-button-tertiary-background-disabled,
      'button-border-disabled': --pkt-color-button-tertiary-background-disabled,
      'button-text-disabled': --pkt-color-button-tertiary-text-disabled,
    ),
  ),
);

.pkt-btn__icon svg {
  --ring-color: var(--pkt-color-brand-dark-blue-700);
  --spinner-color: var(--pkt-color-brand-blue-1000);

  [data-mode='dark'] & {
    --ring-color: var(--pkt-color-brand-neutrals-white);
    --spinner-color: var(--pkt-color-brand-dark-blue-1000);
  }
}

@mixin -print-skin-as-css-vars($name, $o, $mode) {
  @each $key, $value in $o {
    // Only print primary skin and css vars that differ from primary
    @if $name == 'primary' or $value !=map.get($-skins, 'primary', $mode, $key) {
      --pkt-color-#{$key}: var(#{$value});
    }
  }
}

@function -padding($o) {
  $line-height: map.get(
    variables.$line-height,
    functions.map-deep-get(variables.$pkt-styles, map.get($o, 'text-class'), 'line-height')
  );
  @return calc((map.get($o, 'height') - $line-height) / 2 - $-border-width) map.get($o, 'padding-inline');
}

@mixin -size($name, $o) {
  @if $name ==medium {
    & {
      min-height: map.get($o, 'height');
      padding: -padding($o);
      line-height: map.get($o, 'line-height');
      @include typography.get-text(map.get($o, 'text-class'));
    }
    &__icon,
    &__icon .pkt-icon {
      height: map.get($o, 'icon-size');
      margin: map.get($o, 'icon-margin');
      width: map.get($o, 'icon-size');
    }

    // button variants (base)
    &--label-only {
      .pkt-btn__icon:not(.pkt-btn__spinner) {
        display: none;
      }
    }

    &--icon-left {
      flex-direction: row;
    }

    &--icon-right {
      flex-direction: row-reverse;
    }

    &--icons-right-and-left {
      flex-direction: row;
    }

    &--icon-only {
      padding: map.get($o, 'padding-icon-only');

      .pkt-btn__text {
        @extend %sr-only;
      }
    }
  } @else {
    &--#{$name} {
      min-height: map.get($o, 'height');
      padding: -padding($o);
      line-height: map.get($o, 'line-height');

      @include typography.get-text(map.get($o, 'text-class'));
    }

    &--#{$name} &__icon,
    &--#{$name} &__icon .pkt-icon {
      height: map.get($o, 'icon-size');
      margin: map.get($o, 'icon-margin');
      width: map.get($o, 'icon-size');
    }

    &--#{$name}.pkt-btn--icon-only {
      padding: map.get($o, 'padding-icon-only');
    }
  }
}

@mixin -skin($name, $o) {
  $css-skin: '';

  @if $name !=primary {
    $css-skin: --#{$name};
  }

  .pkt-btn#{$css-skin} {
    @include -print-skin-as-css-vars($name, map.get($-skins, $name, 'light'), 'light');
  }

  @at-root [data-mode='dark'] .pkt-btn#{$css-skin} {
    @include -print-skin-as-css-vars($name, map.get($-skins, $name, 'dark'), 'dark');

    // Dark mode
    &--green-dark {
      --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
    }

    &--green-dark-outline {
      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
    }

    &--green {
      --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
      --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
    }

    &--green-outline {
      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
      --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
    }

    &--blue {
      --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
      --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
    }

    &--blue-outline {
      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
      --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
    }

    &--beige-light {
      --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
      --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
    }

    &--beige-dark-outline {
      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
    }

    &--yellow {
      --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
      --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
    }

    &--yellow-outline {
      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
      --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
    }

    &--red {
      --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
      --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
    }

    &--red-outline {
      --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
      --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
    }
  }
}

// Print css vars for hvert skin
@each $key, $value in $-skins {
  @include -skin($key, map.get($value, 'light'));
}

// Selve knappe-klassen
.pkt-btn {
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: normal;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: top;
  background-color: var(--pkt-color-button-background-normal);
  border: $-border-width solid var(--pkt-color-button-border-normal);
  color: var(--pkt-color-button-text-normal);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-align: left;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  width: fit-content;
  height: max-content;

  // button sizes & variants

  //hjelpeklasse for full bredde
  &--full,
  &--full & {
    display: flex;
    width: 100%;
  }
  &--full:not(&):not(pkt-button) {
    flex-direction: column;
    gap: 0.5rem;
  }

  //hjelpeklasse for full bredde på liten skjerm
  &--full-small,
  &--full-small & {
    @media screen and (max-width: 36rem) {
      display: flex;
      width: 100%;
    }
  }
  &--full-small:not(&):not(pkt-button) {
    @media screen and (max-width: 36rem) {
      flex-direction: column;
      gap: 0.5rem;
    }
  }

  @each $key, $value in $-sizes {
    @include -size($key, $value);
  }

  &[class*='pkt-btn--icon'] > .pkt-btn__icon {
    display: flex;
  }

  &__icon {
    display: none;
  }

  &.pkt-link > .pkt-link__icon {
    margin-inline: 0;
  }

  &__icon,
  & .pkt-icon {
    --fg-color: currentColor;
    flex-shrink: 0;
  }

  &:link,
  &:visited {
    color: var(--pkt-color-button-text-normal);
  }

  &:focus {
    outline: none;
  }

  @at-root a.pkt-btn:focus-visible,
    div.pkt-btn:not([data-disabled]):focus-visible,
    &:enabled:focus-visible,
    &.pkt-btn:focus-visible,
    &.pkt-btn--focus,
    .pkt-btn--focus & {
    background-color: var(--pkt-color-button-background-focus);
    color: var(--pkt-color-button-text-focus);
    border-color: var(--pkt-color-button-border-focus);
    outline: 4px solid var(--pkt-color-border-states-focus);
    text-decoration: none;
  }

  @at-root a.pkt-btn:hover,
    div.pkt-btn:not([data-disabled]):hover,
    &:enabled:hover,
    &:hover:not(:disabled):not([disabled]):not([data-disabled]),
    &.pkt-btn--hover,
    .pkt-btn--hover & {
    background-color: var(--pkt-color-button-background-hover);
    border-color: var(--pkt-color-button-border-hover);
    color: var(--pkt-color-button-text-hover);
    outline: 0;
    text-decoration: underline;
  }

  @at-root a.pkt-btn:active,
    div.pkt-btn:not([data-disabled]):active,
    &:enabled:active,
    &:active:not(:disabled):not([disabled]):not([data-disabled]),
    &.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]),
    &.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]):hover,
    .pkt-btn--active & {
    background-color: var(--pkt-color-button-background-active);
    border-color: var(--pkt-color-button-border-active);
    color: var(--pkt-color-button-text-active);
    text-decoration: none;
    cursor: inherit;
  }

  &.pkt-btn--isLoading,
  .pkt-btn--isLoading & {
    pointer-events: none;
    cursor: inherit;
  }

  &:disabled,
  &[disabled],
  &[data-disabled],
  &:disabled & {
    background-color: var(--pkt-color-button-background-disabled);
    border-color: var(--pkt-color-button-border-disabled);
    color: var(--pkt-color-button-text-disabled);
    cursor: inherit;
    pointer-events: none;
  }

  // Til slutt: dette er okay å gjøre siden vi spesifiserer en synlig focus state
  &::-moz-focus-inner {
    border: 0;
  }

  // button colors modifiers
  &--green-dark {
    --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
  }

  &--green-dark-outline {
    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--green {
    --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
    --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--green-outline {
    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
    --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--blue {
    --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
    --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--blue-outline {
    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
    --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--beige-light {
    --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
    --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--beige-dark-outline {
    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--yellow {
    --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
    --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--yellow-outline {
    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
    --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--red {
    --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
    --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }

  &--red-outline {
    --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
    --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  }
}