$button-padding-y: 0.3125rem;
$button-padding-x: 0.5rem;

@mixin button {
  font-size: var(--ec-font-size-action);
  height: 2rem;
  line-height: 1.25rem;
  padding: $button-padding-y $button-padding-x;
  border: 0;
  border-radius: var(--ec-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .label {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex: auto;
  }

  .ec-icon {
    flex: none;
  }

  .ec-icon + .label {
    flex: none;
    margin-left: .25rem;
  }

  &.has-badge {
    padding-right: 0.0625rem;
  }

  &:focus {
    outline: none;
    position: relative;
    z-index: 1;
  }

  &:disabled {
    background-color: var(--ec-background-color-disabled);
    border: 1px solid var(--ec-form-control-border-color-disabled);
    color: var(--ec-color-disabled-dark);
    opacity: var(--ec-form-control-opacity-disabled);
    cursor: default;
  }
}

@mixin primary-button {
  background-color: var(--ec-button-background-color-primary, var(--ec-color-gray-8));
  color: var(--ec-button-color-primary, var(--ec-color-primary-light));

  &:active:not(:disabled) {
    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
  }

  &:focus {
    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white)));
  }

  .ec-icon {
    color: var(--ec-button-color-icon-primary, var(--ec-color-primary-light));
  }
}

@mixin secondary-button {
  background-color: var(--ec-button-background-color-secondary, var(--ec-background-color));
  border: 1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));
  color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));

  &:active:not(:disabled) {
    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
    border-color: transparent;
  }

  &:focus {
    box-shadow: var(--ec-button-box-shadow-focus-secondary, (0 0 0 2px var(--ec-border-color-focus)));
    border-color: var(--ec-button-border-color-secondary-focus, transparent);
  }

  .ec-icon {
    color: var(--ec-button-color-icon-secondary, var(--ec-color-icon));
  }
}

// Deprecated
@mixin common-button {
  @include secondary-button();
}

@mixin danger-button {
  background-color: var(--ec-color-danger);
  color: var(--ec-color-primary-light);

  .ec-icon {
    color: var(--ec-button-color-icon, inherit);
  }

  &:active:not(:disabled) {
    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
  }

  &:focus {
    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white)));
  }
}

@mixin icon-button{
  background-color: transparent;
  color: var(--ec-button-color-icon, var(--ec-color-icon));
  width: 2rem;
  padding: 0;

  .ec-icon {
    height: 1rem;
    margin: 0;
    padding: 0;
    color: inherit
  }

  &:hover:not(:disabled) {
    background-color: var(--ec-background-color-hover);

    .ec-icon {
      color: var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)));
    }
  }

  &:active:not(:disabled),
  &:focus {
    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
  }

  &:active:not(:disabled) {
    background-color: var(--ec-background-color-selected);
  }

  &:disabled {
    background-color: transparent;
    border-color: transparent;

    .ec-icon {
      color: var(--ec-color-disabled-dark);
    }
  }

  &.has-badge {
    width: auto;
    min-width: 2rem;
    padding-right: 0;
    padding-left: 0.375rem;
  }
}

@mixin text-button(
  $type: 'text',
  $color: var(--ec-color-primary-dark),
  $icon-color: inherit
) {
  background-color: transparent;
  color: var(--ec-button-color-text, $color);

  .ec-icon {
    color: var(--ec-button-color-icon-#{$type}, $icon-color);
  }

  &:active:not(:disabled),
  &:focus {
    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
  }

  &:disabled {
    background-color: transparent;
    border-color: transparent;
  }
}
