/**
 * Button
 * @define button
 */

@use 'sass:map';
@use '@ecl/vanilla-utility-screen-reader/screen-reader';

// Exposed variables
$theme: null !default;
$button: null !default;

// Internal variables
$min-width: 44px; // According to COMM every interactive element should be at least 44px large

.ecl-button,
%ecl-button {
  appearance: none;
  background: none;
  border-radius: map.get($button, 'radius');
  border-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font: map.get($button, 'font');
  margin: 0;
  min-height: map.get($button, 'min-height');
  min-width: $min-width;
  text-decoration: none;

  &:hover {
    box-shadow: map.get($button, 'shadow');
    text-decoration: none;
  }

  &:focus-visible {
    text-decoration: none;
  }

  &:active {
    outline-width: 0;
  }

  &[disabled],
  &[disabled]:hover {
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
  }
}

.ecl-button__container {
  align-items: center;
  display: flex;
}

.ecl-button__icon {
  flex-shrink: 0;
}

.ecl-button__icon-container {
  display: flex;
  position: relative;
}

.ecl-button__indicator {
  display: none;
}

.ecl-button__icon ~ .ecl-button__label,
.ecl-button__icon-container ~ .ecl-button__label,
.ecl-button__label ~ .ecl-button__icon,
.ecl-button__label ~ .ecl-button__icon-container {
  margin-inline-start: var(--s-xs);
}

// Icon only
.ecl-button--icon-only {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0 !important;

  .ecl-button__label {
    @include screen-reader.sr-only;
  }

  .ecl-button__icon,
  .ecl-button__icon-container {
    margin: 0;
  }

  .ecl-button__icon {
    height: map.get($theme, 'icon', 'm');
    width: map.get($theme, 'icon', 'm');
  }
}

/**
* Button styles
*/
@mixin button($variant: null) {
  background-color: map.get($button, #{$variant}, 'background');
  border: map.get($button, #{$variant}, 'border-width') solid
    map.get($button, #{$variant}, 'border-color');
  color: map.get($button, #{$variant}, 'color');
  padding: calc(
      #{map.get($button, 'padding-vertical')} -
        #{map.get($button, #{$variant}, 'border-width')}
    )
    calc(
      #{map.get($button, 'padding-horizontal')} -
        #{map.get($button, #{$variant}, 'border-width')}
    );

  &:hover {
    background-color: map.get($button, #{$variant}, 'background-hover');
    border-color: map.get($button, #{$variant}, 'border-color-hover');
    color: map.get($button, #{$variant}, 'color-hover');
  }

  &:focus-visible {
    background-color: map.get($button, #{$variant}, 'background-focus');
    border-color: map.get($button, #{$variant}, 'border-color-focus');
    color: map.get($button, #{$variant}, 'color-focus');
    outline: #{map.get($button, #{$variant}, 'outline-width')} solid
      #{map.get($button, #{$variant}, 'outline-color')};
    outline-offset: map.get($button, #{$variant}, 'outline-offset');
  }

  &:active {
    background-color: map.get($button, #{$variant}, 'background-active');
    border-color: map.get($button, #{$variant}, 'border-color-active');
    color: map.get($button, #{$variant}, 'color-active');
  }
}

.ecl-button--primary {
  @include button(primary);
}

// stylelint-disable plugin/selector-bem-pattern
.ecl-button--secondary,
%ecl-button {
  @include button(secondary);

  &:focus-visible {
    box-shadow: map.get($button, 'secondary', 'focus-shadow');
  }
}
// stylelint-enable plugin/selector-bem-pattern

.ecl-button--tertiary {
  @include button(tertiary);
}

.ecl-button--cta {
  @include button(cta);
}

.ecl-button--ghost {
  @include button(ghost);
}

.ecl-button--ghost-inverted {
  @include button(ghost-inverted);
}
