@import '../../../../style/core/utilities.scss';

/*
* Button mixins
*
*/
@mixin buttonHoverStyle($color, $background-color, $border-color) {
  // NB: to get "over" sibling, because of the extendFocusRing
  // But if we would use it, then we have to take care of places we use position="absolute", like the Modal Close button

  color: $color;
  background-color: $background-color;

  @include fakeBorder($border-color, 0.125rem /*2px*/);
}

@mixin buttonHover(
  $color: null,
  $background-color: null,
  $border-color: var(--color-emerald-green),
  $enable-touch: null
) {
  @include hover() {
    @include buttonHoverStyle($color, $background-color, $border-color);

    @content;
  }

  @if $enable-touch == 'touch' {
    html[data-whatintent='touch'] & {
      @include active() {
        @include buttonHoverStyle(
          $color,
          $background-color,
          $border-color
        );
      }
    }
  }
}

@mixin buttonActive($color: null, $background-color: null) {
  @include active() {
    color: $color;
    background-color: $background-color;

    // no animation yet
    @include fakeBorder(transparent);

    @content;
  }
}

@mixin buttonFocus(
  $color: null,
  $background-color: null,
  $focus-color: null,
  $extendShadow: null
) {
  @include focus() {
    html[data-whatinput='keyboard'] & {
      color: $color;
      background-color: $background-color;
    }

    @include focusRing(
      null,
      $focus-color,
      inset,
      $extendShadow: $extendShadow
    );

    @content;
  }
}

@mixin buttonFocusVisible(
  $color: null,
  $background-color: null,
  $focus-color: null,
  $extendShadow: null
) {
  @include focus-visible() {
    color: $color;
    background-color: $background-color;

    @include focusRing(
      always,
      $focus-color,
      inset,
      $extendShadow: $extendShadow
    );

    @content;
  }
}

// Used in tertiary button variant
@mixin buttonFocusRing(
  $whatinput: null,
  $inset: null,
  $extendShadow: null,
  $left: -0.5rem,
  $right: -0.5rem
) {
  // Create focus-ring
  &::before {
    content: '';
    position: absolute;
    z-index: 1; // to be visible in other absolute contexts

    top: 0;
    left: $left;
    bottom: 0;
    right: $right;

    height: inherit;
    border-radius: inherit;

    @include focusRing(
      $whatinput,
      null,
      $inset,
      $extendShadow: $extendShadow
    );
  }
}

@mixin drawUnderlineBorder() {
  // underline border
  &::after {
    content: '';
    position: absolute;
    z-index: 1;

    left: 0;
    right: 0;
    bottom: 0;

    width: auto;
    height: 0.095rem; // 1.5 - because of webkit, we round to .095
    border-radius: calc(0.095rem / 2);

    color: var(--color-sea-green); // border color
    background-color: currentcolor;

    // using box-shadow works well to get 1.5px
    // but not for the transition to opacity
    // box-shadow: 0 0 0 calc(0.0625rem / 2) currentColor;

    @content;
  }

  .dnb-skeleton &::after {
    content: none;
  }
}