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

.dnb-button {
  &--tertiary {
    --button-tertiary-focus-left: -0.5rem;
    --button-tertiary-focus-right: -0.5rem;
    --button-tertiary-focus-overflow--icon-top: -0.5rem;
    --button-tertiary-underline-left: var(
      --button-tertiary-underline-overflow
    );
    --button-tertiary-underline-right: var(
      --button-tertiary-underline-overflow
    );
    --button-tertiary-underline-overflow: 0;
    --button-tertiary-underline-overflow--icon: calc(
      (var(--button-icon-gutter) + var(--button-icon-size)) * -1
    );
    // create underline (::after)
    .dnb-button__text {
      position: relative; // because of the underline

      @include drawUnderlineBorder() {
        bottom: -0.0625rem;
        color: transparent;
        transition: color 250ms ease-in-out;
        [data-visual-test-wrapper] & {
          transition: none;
        }
        left: var(--button-tertiary-underline-left);
        right: var(--button-tertiary-underline-right);
      }
    }

    @include focus-visible() {
      outline: none;
      @include buttonFocusRing(
        'always',
        $left: var(--button-tertiary-focus-left),
        $right: var(--button-tertiary-focus-right)
      );

      // underline
      .dnb-button__text::after {
        visibility: hidden;
      }
    }

    @include hover() {
      // underline
      .dnb-button__text::after {
        visibility: visible;
      }
    }

    @include active() {
      @include removeFocusRing('keyboard');

      // underline
      .dnb-button__text::after {
        html[data-whatintent='touch'] & {
          transition: none;
          visibility: visible;
          opacity: 1;
        }
        html:not([data-whatintent='touch']) & {
          visibility: hidden;
        }
      }
    }

    &.dnb-button--has-text {
      --button-padding-left: 0;
      --button-padding-right: 0;
      --button-icon-margin-top: calc(
        (var(--button-height) - var(--button-icon-size)) / 2
      );

      .dnb-button__icon {
        align-self: flex-start; // needed to vertically center icon
      }
    }

    &.dnb-button--icon-position-top {
      --button-tertiary-focus-left: var(
        --button-tertiary-focus-overflow--icon-top
      );
      --button-tertiary-focus-right: var(
        --button-tertiary-focus-overflow--icon-top
      );
      flex-direction: column;
      border-radius: 0.5rem;
      vertical-align: middle;

      &.dnb-button--has-text {
        --button-icon-margin-top: 0.5rem;
        .dnb-button__icon {
          align-self: center;
        }
      }

      .dnb-button__text {
        margin-top: 0;
        margin-bottom: 0.25rem;
        font-size: var(--font-size-x-small);
      }
      &.dnb-button--size-large {
        .dnb-button__text {
          font-size: var(--font-size-small);
        }
      }

      .dnb-button__alignment {
        order: 3;
        height: 0;
      }
    }

    &.dnb-button--has-icon {
      &.dnb-button--has-text {
        &.dnb-button--icon-size-medium,
        &.dnb-button--icon-size-large {
          --button-tertiary-underline-overflow--icon: var(
            --button-tertiary-underline-overflow
          );
        }

        &.dnb-button--icon-position-left {
          --button-tertiary-focus-right: -1rem;
          --button-tertiary-underline-left: var(
            --button-tertiary-underline-overflow--icon
          );
        }
        &.dnb-button--icon-position-right {
          --button-tertiary-focus-left: -1rem;
          --button-tertiary-underline-right: var(
            --button-tertiary-underline-overflow--icon
          );
        }
      }

      &:not(.dnb-button--has-text) {
        --button-tertiary-focus-left: 0;
        --button-tertiary-focus-right: 0;
      }
    }

    // stylelint-disable-next-line
    html[data-whatinput='keyboard']
		// webkit fix
		  &:hover:focus
		  .dnb-button__text::after {
      visibility: hidden;
    }
  }
}