@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;

$classname: '#{utils.$prefix}-button';
// Color variables
$color-primary: tokens.$color-neutral-grey-800;
$color-primary-active: tokens.$color-neutral-grey-900;
$color-secondary: tokens.$color-neutral-white;
$color-hover: tokens.$color-interface-interaction-light;
$color-disabled: tokens.$color-neutral-grey-500;
// Size variables
$min-height-small: tokens.$spacing-base-10;
$min-height-medium: tokens.$spacing-base-12;
$min-height-large: tokens.$spacing-base-14;
$padding-small: tokens.$spacing-base-4;
$padding-medium: tokens.$spacing-base-6;
$padding-large: tokens.$spacing-base-8;
$size-icon: tokens.$spacing-base-5;
$size-icon-large: tokens.$spacing-base-6;

@mixin hover {
  background-color: $color-hover;
  color: $color-primary;
  border: tokens.$border-width-default solid $color-primary;
  cursor: pointer;
}

@mixin active($bg-color) {
  background-color: $bg-color;
  color: $color-secondary;
}

@mixin disabled($bg-color, $text-color, $border-color) {
  background-color: $bg-color;
  color: $text-color;
  border-color: $border-color;
  cursor: not-allowed;
}

@mixin size($height, $border-radius, $horizontal-padding) {
  min-height: $height;
  min-width: $height * 2;
  max-width: $height * 12;
  border-radius: $border-radius;
  padding: 0 $horizontal-padding;
}

.#{$classname} {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all tokens.$duration-normal;
  transition-property: background-color, border-color, color;
  overflow: hidden;

  // Size medium
  @include size(
    $min-height-medium,
    tokens.$border-radius-large,
    $padding-medium
  );
  @include typography.text-interface-300();

  // Primary
  background-color: $color-primary;
  color: $color-secondary;
  border: tokens.$border-width-default solid transparent;

  // Elements
  & > svg {
    path {
      fill: $color-secondary;
    }
    box-sizing: border-box;

    display: inline-block;
    flex-shrink: 0;
    flex-grow: 0;

    text-align: end;

    height: $size-icon;
    width: $size-icon;
    transition: inherit;
  }
  &--icon-left svg {
    margin-right: tokens.$spacing-base-2;
  }
  &--icon-right svg {
    margin-left: tokens.$spacing-base-2;
  }

  // Size modifiers
  &--small {
    @include size(
      $min-height-small,
      tokens.$border-radius-large,
      $padding-small
    );
    @include typography.text-interface-300();
  }
  &--large {
    @include size(
      $min-height-large,
      tokens.$border-radius-x-large,
      $padding-large
    );
    @include typography.text-interface-400();

    & svg {
      height: $size-icon-large;
      width: $size-icon-large;
    }
  }

  // Variant modifiers
  &:not([class*='#{$classname}--disabled']) {
    &:hover {
      @include hover();

      & svg path {
        fill: $color-primary;
      }
    }
    &:active {
      @include active($color-primary-active);

      & svg {
        fill: $color-secondary;
      }
    }
  }

  &--disabled {
    @include disabled($color-disabled, $color-secondary, $color-disabled);

    & > svg path {
      fill: $color-secondary;
    }
  }

  &--secondary {
    background-color: $color-secondary;
    color: $color-primary;
    border: tokens.$border-width-default solid $color-primary;

    &:not([class*='#{$classname}--disabled']) {
      &:active {
        @include active($color-primary);
      }

      & > svg path {
        fill: $color-primary;
      }
    }
    &.#{$classname}--disabled {
      @include disabled($color-secondary, $color-disabled, $color-disabled);

      & > svg path {
        fill: $color-disabled;
      }
    }
  }
}