@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/screen-reader' as *;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

$dark-mode-disabled-transparrent: #ffffffb3;
$with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
    spacers.getSpacer(2xs),
  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
    spacers.getSpacer(2xs) 0,
  'left-icon' 'large' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0 spacers.getSpacer(2xs) 0
    spacers.getSpacer(xs),
  'right-icon' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(2xs) 0
    spacers.getSpacer(xs) 0,
  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
    spacers.getSpacer(l) 0,
  'arrow' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l) 0
    spacers.getSpacer(xl) 0,
  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
  'arrow--both-icons' 'large' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
  'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
  'only-icon' 'large' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
  'both-icons' 'large' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0;

// Brukes til å aktivere hover styling uten at button hovres
@mixin outline-borderless-hover {
  @include outline-borderless-background(
    var(--color-action-background-transparent-onlight-hover),
    var(--color-action-background-transparent-onlight-hover)
  );
}

@mixin outline-borderless-text-hover {
  @include text-color(var(--color-action-text-onlight-hover), var(--color-action-text-onlight-hover));
}

@mixin focus-shadow($with-uu-border: true) {
  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$black;

  @if $with-uu-border {
    border: 1px solid var(--color-action-border-ondark-focus);
  }
}

@mixin focus-shadow-on-dark($with-uu-border: true) {
  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$white;

  @if $with-uu-border {
    border: 1px solid var(--color-action-border-onlight-focus);
  } @else {
    border: none;
  }
}

@mixin outline-borderless-background($background-color, $hover-background-color) {
  background-color: $background-color;

  &:hover {
    background-color: $hover-background-color;
  }

  :disabled > & {
    background-color: transparent;
  }
}

@mixin outline($ouline-color, $hover-outline-color) {
  outline: spacers.getSpacer(4xs) solid $ouline-color;
  outline-offset: spacers.getSpacer(4xs) * -1;

  &:hover {
    box-shadow: none;
  }

  :disabled > & {
    outline-color: palette.$neutral700;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      outline-color: palette.$neutral500;
    }
  }
}

@mixin text-color($color, $hover-color) {
  color: $color;

  :hover > & {
    color: $hover-color;
  }

  :disabled > & {
    color: palette.$neutral700;
  }
}

@mixin fill-on-dark($background-color) {
  background-color: palette.$white;

  &:hover {
    box-shadow: none;
  }

  &:hover,
  :focus > & {
    background-color: $background-color;
  }

  /* stylelint-disable-next-line */
  :disabled > & {
    background-color: $dark-mode-disabled-transparrent;
  }
}

@mixin on-dark-text($color) {
  color: $color;

  :disabled > & {
    color: palette.$neutral700;
  }
}

@mixin on-dark {
  &--on-dark {
    @include fill-on-dark(var(--color-action-background-ondark-hover));

    :focus > & {
      @include focus-shadow-on-dark(true);

      &:hover {
        @include focus-shadow-on-dark(true);

        background-color: palette.$white;
      }
    }
  }

  &--on-dark#{&}--destructive {
    @include fill-on-dark(palette.$cherry50);
  }

  &--on-dark#{&}--outline,
  &--on-dark#{&}--borderless,
  &--on-dark#{&}--outline#{&}--destructive,
  &--on-dark#{&}--borderless#{&}--destructive {
    background-color: transparent;

    :focus > & {
      @include focus-shadow-on-dark(false);

      &:hover {
        @include focus-shadow-on-dark(false);

        background-color: palette.$inverted-hover;
      }
    }
  }

  &--on-dark#{&}--outline {
    outline-color: palette.$white;

    :disabled > & {
      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        outline-color: $dark-mode-disabled-transparrent;
      }
    }
  }

  &--on-dark#{&}--borderless {
    :disabled > & {
      border-color: $dark-mode-disabled-transparrent;
    }
  }

  &--on-dark &__text {
    @include on-dark-text(palette.$blueberry600);
  }

  &--on-dark#{&}--destructive &__text {
    @include on-dark-text(palette.$cherry600);
  }

  &--on-dark#{&}--outline &__text,
  &--on-dark#{&}--borderless &__text {
    color: palette.$white;

    :disabled > & {
      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        color: $dark-mode-disabled-transparrent;
      }
    }
  }
}

// UU krav om klikkbart område er 48x48px, button-wrapper fyller de manglende 8px i høyden på mobilskjerm (synlig button er 40px høy)
.button-wrapper {
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  border: 0;
  padding: 0;

  &--fluid {
    width: 100%;
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:focus-visible {
    outline: none;
  }
}

.button {
  display: inline-flex;
  background-color: palette.$blueberry500;
  padding: 0 spacers.getSpacer(m);
  font-size: font-settings.$font-size-sm;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.375rem;
  align-items: center;
  width: 100%;
  min-width: 2.75rem;
  min-height: 2.75rem;
  box-sizing: border-box;
  outline: none;
  border-radius: 0.5rem;
  letter-spacing: unset;

  &:hover {
    background-color: palette.$blueberry700;
    box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$blueberry700;
  }

  :disabled > & {
    pointer-events: none;
    outline: spacers.getSpacer(4xs) dashed palette.$neutral700;
    outline-offset: spacers.getSpacer(4xs) * -1;
    background-color: palette.$neutral200;
  }

  :disabled > & &__text {
    color: palette.$neutral800;
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    min-height: 3.125rem;
    padding: 0 spacers.getSpacer(l);
    font-size: font-settings.$font-size-md;
    line-height: 1.5rem;
  }

  &--large {
    min-height: 3.5rem;
    padding: 0 spacers.getSpacer(l);
    font-size: 1.3125rem;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      min-height: 4.5rem;
      padding: 0 spacers.getSpacer(xl);
      font-size: font-settings.$font-size-lg;
      line-height: 1.5rem;
    }
  }

  @each $icon-class, $size-class, $pl, $pr, $pld, $prd, $svgml, $svgmr, $svgmld, $svgmrd in $with-icons {
    &--#{$icon-class}#{&}--#{$size-class} {
      padding-left: $pl;
      padding-right: $pr;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        padding-left: $pld;
        padding-right: $prd;
      }
    }
  }

  @each $icon-class, $size-class, $pl, $pr, $pld, $prd, $svgml, $svgmr, $svgmld, $svgmrd in $with-icons {
    &--#{$size-class} &__#{$icon-class} {
      margin-left: $svgml;
      margin-right: $svgmr;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        margin-left: $svgmld;
        margin-right: $svgmrd;
      }
    }
  }

  &--destructive {
    background-color: palette.$cherry500;

    &:hover {
      background-color: palette.$cherry700;
      box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$cherry700;
    }
  }

  // Gives space to focus border
  border: 1px solid transparent;

  :focus > & {
    @include focus-shadow;

    &:hover {
      @include focus-shadow;
    }
  }

  &--outline,
  &--borderless {
    @include outline-borderless-background(transparent, var(--color-action-background-transparent-onlight-hover));

    :focus > & {
      @include focus-shadow(false);

      &:hover {
        @include focus-shadow(false);
      }
    }
  }

  &--outline#{&}--destructive,
  &--borderless#{&}--destructive {
    @include outline-borderless-background(transparent, palette.$cherry50);
  }

  &--outline {
    @include outline(palette.$blueberry700, palette.$blueberry50);
  }

  &--outline#{&}--destructive {
    @include outline(palette.$cherry700, palette.$cherry50);
  }

  &--borderless {
    border-radius: 0;

    &:hover {
      box-shadow: none;
    }

    :disabled > & {
      outline: none;
    }
  }

  &--borderless:not(.button--only-icon) {
    padding: 0 spacers.getSpacer(2xs);

    &:has(.button__left-icon) {
      padding-left: 0;
    }

    &:has(.button__right-icon) {
      padding-right: 0;
    }
  }

  /* stylelint-disable-next-line */
  &__text {
    color: palette.$white;
    margin: 0 auto 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 0.4375rem 0;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      margin: 0 auto 0 0;
      padding: 0.625rem 0;
    }

    &--ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &--centered {
      width: 100%;
    }
  }

  &__right-unicode-arrow {
    white-space: pre;
  }

  /* stylelint-disable-next-line */
  &--outline &__text,
  &--borderless &__text {
    @include text-color(var(--color-action-text-onlight), var(--color-action-text-onlight-hover));
  }

  &--outline#{&}--destructive &__text,
  &--borderless#{&}--destructive &__text {
    @include text-color(palette.$cherry600, palette.$cherry700);
  }

  /* stylelint-disable-next-line */
  &--only-icon &__text {
    @include sr-only;
  }

  @include on-dark;

  @include breakpoints.tiny-screens-media-query {
    min-height: spacers.getSpacer(l);
    padding: 0 spacers.getSpacer(xs);
  }
}

.diagonal {
  display: block;
  transform: matrix(-1, 0, 0, 1, -8, 2);
  position: absolute;
  width: 3.7rem;
  height: 2.25rem;

  &__line {
    display: block;
    border-bottom: spacers.getSpacer(4xs) dashed palette.$neutral500;
    transform-origin: top left;
    transform: rotate(37.4deg);
  }

  &--on-dark &__line {
    border-color: palette.$white;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      border-color: $dark-mode-disabled-transparrent;
    }
  }
}