/**
 * Button print
 * @define button
 */

@use 'sass:map';

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

.ecl-button,
%ecl-button {
  appearance: none;
  background: none;
  border-radius: map.get($button, 'radius');
  border-width: 0;
  cursor: pointer;
  display: inline-block;
  font: map.get($theme, 'font-ui-print', 'm');
  margin: 0;
  text-decoration: none;

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

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

.ecl-button__label {
  text-align: left;
}

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

.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-end: map.get($theme, 'spacing-print', 'xs');
}

.ecl-button__indicator {
  display: none;
}

/**
* 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')}
    );
}

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

// stylelint-disable plugin/selector-bem-pattern
.ecl-button--secondary,
%ecl-button {
  @include button(secondary);
}
// 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);
}
