/*
* Button theme
*
*/

@import '../../../../style/core/utilities.scss';
@import './button-mixins.scss';

// Because the tertiary button has so much code,
// we slice the shareable parts out in a separate file
@import '../button--tertiary.scss';

.dnb-button {
  &--primary {
    color: var(--color-white);
    background-color: var(--color-sea-green);

    @include buttonHover(var(--color-sea-green), var(--color-white));
    @include buttonFocus(var(--color-sea-green), var(--color-white));
    @include buttonActive(
      var(--color-sea-green),
      var(--color-mint-green-50)
    );

    &[disabled] {
      color: var(--color-white);
      background-color: var(--color-sea-green-30);
    }
  }
  &:not([disabled])#{&}--primary#{&}__status {
    &--error {
      color: var(--color-white);
      background-color: var(--color-fire-red);
    }
  }

  &--secondary {
    color: var(--color-sea-green);
    background-color: var(--color-white);

    @include fakeBorder(var(--color-sea-green), 0.0625rem, inset);

    @include buttonHover(var(--color-sea-green), var(--color-white));
    @include buttonFocus(var(--color-sea-green), var(--color-white));
    @include buttonActive(
      var(--color-sea-green),
      var(--color-mint-green-50)
    );

    &[disabled],
    &[disabled]:focus // only because of href/anchor button
    {
      color: var(--color-sea-green-30);
      background-color: var(--color-white);

      // only because of href/anchor button
      @include fakeBorder(var(--color-sea-green-30), 0.0625rem, inset);
    }
  }
  &:not([disabled])#{&}--secondary#{&}__status {
    &--error {
      color: var(--color-fire-red);

      @include fakeBorder(var(--color-fire-red), 0.0625rem, inset);
      .dnb-button__icon {
        color: inherit;
      }
    }
  }

  // Icon button
  &--secondary:not(#{&}--has-text) {
    @include buttonHover(var(--color-emerald-green), var(--color-white));
    @include buttonFocus(var(--color-emerald-green), var(--color-white));
    @include buttonActive(
      var(--color-emerald-green),
      var(--color-mint-green-50)
    );
  }
  &--secondary:not(#{&}--has-text):not(#{&}--input-button):not(
      #{&}--control-before
    ):not(#{&}--control-after)#{&}--size-large {
    // Make exception for icon button as it should be smaller than the original large button
    width: calc(var(--button-width--large) - 0.5rem);
    line-height: calc(var(--button-height) - 0.5rem);
  }
  &--secondary:not(#{&}--has-text)#{&}--control-before,
  &--secondary:not(#{&}--has-text)#{&}--control-after {
    box-shadow: none;
    border: none;
    @include hover() {
      box-shadow: none;
      border: none;
    }
  }

  // simulate active state
  &--active {
    @include fakeBorder(var(--color-emerald-green), 0.125rem /*2px*/);
  }

  &--tertiary {
    color: var(--color-sea-green);
    background-color: transparent;

    @include hover() {
      // underline
      .dnb-button__text::after {
        color: var(--color-emerald-green);
      }
    }

    @include active() {
      // underline
      .dnb-button__text::after {
        html[data-whatintent='touch'] & {
          color: var(--color-emerald-green);
        }
      }
    }

    &.dnb-button--icon-position-top {
      .dnb-button__text {
        font-size: var(--font-size-x-small);
      }
      &.dnb-button--size-large {
        .dnb-button__text {
          font-size: var(--font-size-small);
        }
      }
    }

    &[disabled] {
      color: var(--color-sea-green-30);
    }
  }

  &--signal {
    color: var(--color-ocean-green);
    background-color: var(--color-accent-yellow);

    @include buttonHover(
      var(--color-ocean-green),
      var(--color-accent-yellow),
      var(--color-ocean-green),
      'touch'
    );
    @include buttonFocus(
      var(--color-ocean-green),
      var(--color-accent-yellow)
    );
    @include buttonActive(
      var(--color-ocean-green),
      var(--color-accent-yellow)
    );

    &[disabled] {
      color: var(--color-black-20);
      background-color: var(--color-accent-yellow-30);
    }
  }

  // input-button
  &--input-button#{&}--secondary:not(&--has-text):not([disabled]) {
    // Because we cannot anymore have a square, we have to trick that part
    background-color: transparent;
    box-shadow: none;

    &::after {
      content: '';
      position: absolute;

      top: 0;
      bottom: 0;
      left: 0;

      width: var(--input-border-width);
      background-color: currentcolor;
    }
  }
  html:not([data-whatintent='touch'])
    &--input-button#{&}--secondary:not(&--has-text):not([disabled]) {
    &:focus-visible,
    &:hover {
      color: var(--color-white);
      &,
      &::after {
        background-color: var(--color-sea-green);
      }
      box-shadow: none;
    }
    &:active {
      color: var(--color-sea-green);
      &,
      &::after {
        background-color: var(--color-mint-green-50);
      }
      &::after {
        top: var(--input-border-width);
        bottom: var(--input-border-width);
      }
    }
  }
  html:not([data-whatintent='touch'])
    &--input-button#{&}--secondary:not(&--has-text)[disabled] {
    color: var(--color-black-55);
    background-color: var(--color-black-3);
    @include fakeBorder(
      var(--color-black-55),
      var(--input-border-width),
      inset
    );
  }

  // For internal usage only, we have also "unstyled"
  // &--unstyled {}
}