button {
  //reset default button styles
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background-color: transparent;
  line-height: line-height("single");
  color: color("foreground");
}

.button {
  @include set-font(0, "single");
  @include set-colors("theme");
  padding: spacing($button-padding-vertical) spacing($button-padding-horizontal);
  border: none;
  text-decoration: none; //overwrite incase of styling an underlined link as a button
  box-shadow: $shadow-style-front color("shadow");
  border-radius: 0; //for iOS
  text-align: center;

  &:hover {
    background-color: color("theme-hover");
    outline: none;
    cursor: pointer;
  }

  &:focus-visible {
    outline: $outline-width solid color("utility-focus");
    outline-offset: $outline-offset;
  } 

  &:active {
    box-shadow: $shadow-style-back color("shadow");
    outline: none;
  }

  &[disabled].visually-disabled, 
  &[aria-disabled="true"].visually-disabled {
    box-shadow: none;
    background-image: none;
    border-color: transparent;
    background-color: color("background-secondary");
    color: color("foreground-disabled");

    &:hover {
      background-color: color("background-secondary");
      color: color("foreground-disabled");
      cursor: default;
    }
  }

  &[disabled], 
  &[aria-disabled="true"] {
    &:hover {
      @include set-colors("theme");
    }
  }

  &--small {
    padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-small);
  }

  &--large {
    padding: spacing($button-padding-vertical-large) spacing($button-padding-horizontal-large);
    @include set-font(1, "single");
  }

  &--dimmed {
    @include set-colors("interactive");

    &:hover {
      background-color: color("interactive-hover");
    }

    &[disabled],
    &[aria-disabled="true"] {
      &:hover {
        @include set-colors("interactive");
      }
    }
  }


  &--icon {
    display: inline-flex;
    overflow: none;

    @include icon-style {
      margin-right: spacing($button-icon-spacing);
      align-self: start;
    }

    //TODO deprecate, use .icon-[icon name] class instead
    &[data-icon]::before {
      content: attr(data-icon);
    }

    &--right {
      &::before{
        order: 10;
        margin-right: 0;
        margin-left: spacing($button-icon-spacing)
      }
    }

    &--hide-label {
      display: inline-flex;
      align-items: center;
      padding: 0;
      width: spacing($button-padding-vertical, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
      height: spacing($button-padding-vertical, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
      overflow: hidden;
      white-space: nowrap;
      border-radius: 50%;

      &::before {
        flex: 0 0 calc(100% + 1px); //+ 1px to make sure label text is completly hidden
        margin: 0;
        text-align: center;
        margin-right: 0;
        align-self: center;
      }

      &.button--text {
        padding: 0;
      }

      &.button--small {
        width: spacing($button-padding-vertical-small, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
        height: spacing($button-padding-vertical-small, $times: 2, $add: "#{line-height("single", $include-calc: false)}");

        &.button--text {
          padding: 0;
        }
      }

      &.button--large {
        width: spacing($button-padding-vertical-large, $times: 2, $add: "#{line-height("single", $include-calc: false)}");
        height: spacing($button-padding-vertical-large, $times: 2, $add: "#{line-height("single", $include-calc: false)}");

        &.button--text {
          padding: 0;
        }
      }
    }
  }

  &--ireversable-action,
  &--confirmable-action {
    @extend .button--icon;
    background-image: linear-gradient(var(--utility-button-border-color), var(--utility-button-border-color)), linear-gradient(var(--utility-button-border-color), var(--utility-button-border-color)), linear-gradient(var(--utility-button-border-color), var(--utility-button-border-color)), linear-gradient(var(--utility-button-border-color), var(--utility-button-border-color));
    background-size: 100% math.div($width-border-utility, 2), math.div($width-border-utility, 2) 100%, 100% math.div($width-border-utility, 2), math.div($width-border-utility, 2) 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, right top, left bottom, left top;

    &.button--icon--hide-label {
      background-image: linear-gradient(var(--utility-button-border-color), var(--utility-button-border-color));
      background-size: 100% 100%;
    }
  }

  &--ireversable-action {
    @include set-colors("utility-warning-background");
    --utility-button-border-color: #{color("utility-warning")};

    &:hover {
      background-color: color("utility-warning-background-hover");
      --utility-button-border-color: #{color("utility-warning-hover")};
    }

    &[disabled],
    &[aria-disabled="true"] {
      &:hover {
        @include set-colors("utility-warning-background");
        --utility-button-border-color: #{color("utility-warning")};
      }
    }
  }

  &--confirmable-action {
    @include set-colors("utility-confirm-background");
    --utility-button-border-color: #{color("utility-confirm")};

    &:hover:not(.button--processing) {
      background-color: color("utility-confirm-background-hover");
      --utility-button-border-color: #{color("utility-confirm-hover")};
    }

    &[disabled],
    &[aria-disabled="true"] {
      &:hover {
        @include set-colors("utility-confirm-background");
        --utility-button-border-color: #{color("utility-confirm")};
      }
    }
  }

  &--text {
    color: color("foreground-theme");
    background-color: transparent;
    padding: spacing($button-padding-vertical) spacing($button-padding-horizontal-text);
    box-shadow: none;

    &.button--small {
      padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-text-small);
    }

    &.button--large {
      padding: spacing($button-padding-vertical-large) spacing($button-padding-horizontal-text-large);
    }

    &:hover {
      box-shadow: $shadow-style-front color("shadow");
      background-color: transparent;
    }

    &:active {
      box-shadow: $shadow-style-back color("shadow");
    }

    &[disabled].visually-disabled,
    &[aria-disabled="true"] {
      background-color: transparent;
      color: color("foreground-disabled");

      &:hover {
        box-shadow: none;
        background-color: transparent;
        cursor: default;
      }
    }

    &[disabled],
    &[aria-disabled="true"] {
      &:hover {
        color: color("foreground-theme");
        background-color: transparent;
        box-shadow: none;
      }
    }

    &--align-edge-visually {
      margin-right: spacing($button-padding-horizontal-text, $times: -1);
      margin-left: spacing($button-padding-horizontal-text, $times: -1);

      &.button--small {
        margin-right: spacing($button-padding-horizontal-text-small, $times: -1);
        margin-left: spacing($button-padding-horizontal-text-small, $times: -1);
      }

      &.button--large {
        margin-right: spacing($button-padding-horizontal-text-large, $times: -1);
        margin-left: spacing($button-padding-horizontal-text-large, $times: -1);
      }
    }
  }
}

.button--processing[disabled],
.button--processing[aria-disabled="true"],
.submit-input-wrapper--processing {
  color: transparent;

  @include processing-animation("theme-foreground");

  &:hover {
    color: transparent;
    background-color: color("theme");
    cursor: default;
  }

  &:active:not(.button--text):not(.submit-input-wrapper--processing) {
    box-shadow: $shadow-style-front color("shadow");
  }

  & input.button {
    color: transparent;

    &:hover {
      color: transparent;
    }

    &:active:not(.button--text) {
      box-shadow: $shadow-style-front color("shadow");
    }
  }

  &.button--dimmed {
    &::after {
      --processing-color: #{color("foreground")};
    }

    &:hover {
      background-color: color("interactive");
    }
  }

  &.button--ireversable-action {
    &::after {
      --processing-color: #{color("utility-foreground")};
    }

    &:hover {
      background-color: color("utility-warning-background");
    }
  }

  &.button--confirmable-action {
    &::after {
      --processing-color: #{color("utility-foreground")};
    }

    &:hover {
      background-color: color("utility-confirm-background");
    }
  }

  &.button--text {
    &::after {
      --processing-color: #{color("foreground-theme")};
    }

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

.button-container {
  //TODO lav om når flexbox har ordentlig support for gap
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 0;
  margin-bottom: spacing($button-spacing-vertical-between-buttons, $times: -1);
  margin-left: spacing($button-spacing-horizontal-between-buttons, $times: -0.5);
  margin-right: spacing($button-spacing-horizontal-between-buttons, $times: -0.5);

  &--vertical {
    flex-direction: column;

    &.button-container--centered {
      align-items: center;
    }
  }

  &--constrain-width {
    max-width: spacing($button-spacing-horizontal-between-buttons, $add: $line-width-max);
  }

  &--centered {
    justify-content: center;
  }
  &--left {
    justify-content: left;
  }
  &--right {
    justify-content: right;
  }

  &--fixed-width {
    & > .button:not(.button--icon--hide-label) {
      width: 100%;
      max-width: 15em;
      text-align: center;
    }
  }

  &__split {
    flex-grow: 1;
  }

  &__link-wrapper {
    padding: 0 spacing($button-padding-horizontal-text);

    a {
      line-height: line-height("single");
    }

    &--small {
      padding: 0 spacing($button-padding-horizontal-text-small);
    }

    &--large {
      padding: 0 spacing($button-padding-horizontal-text-large);
    }
  }

  & > * {
    margin-top: 0;
    margin-bottom: spacing($button-spacing-vertical-between-buttons);
    margin-left: spacing($button-spacing-horizontal-between-buttons, $times: .5);
    margin-right: spacing($button-spacing-horizontal-between-buttons, $times: .5);
  }

  & > .button--text {
    margin-left: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text));
    margin-right: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text));

    &.button--small {
      margin-left: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text-small));
      margin-right: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text-small));
    }

    &.button--large {
      margin-left: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text-large));
      margin-right: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text-large));
    }
  }

  & + & {
    margin-top: spacing($button-spacing-vertical-between-buttons);
  }
}