/*
* Button theme
*
*/

@use '../../../../style/core/utilities.scss' as utilities;

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

.dnb-button {
  &--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 utilities.hover() {
      box-shadow: none;
      border: none;
    }
  }

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

    &.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);
        }
      }
    }
  }

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