@use 'semanticColors' as *;
@use 'typography' as *;
@use 'spacing' as *;
@use 'surfaces' as *;
@use 'func' as *;
@use 'css-util' as util;

$button-vertical-padding: change-rem-unit-to-em(spacing(xs));
$button-horizontal-padding: change-rem-unit-to-em(spacing(s));

.button {
  position: relative;
  display: inline-block;
  // Reset
  @include util.no-selection;
  border: 0;
  text-decoration: none;
  cursor: pointer;

  // Style
  padding: $button-vertical-padding $button-horizontal-padding;
  border-radius: $button-radius;

  color: $control-text-color-white;
  background-color: $button-blue-color;

  &:hover {
    background-color: $button-blue-hover-color;
  }

  &:active {
    background-color: $button-blue-push-color;
  }

  &:focus {
    outline: none;
  }

  &.white {
    color: $control-text-color-black;
    background-color: $button-white-color;

    border: 1px solid $control-border-color;

    &:hover {
      background-color: $button-white-hover-color;
    }
  
    &:active {
      background-color: $button-white-push-color;
    }
  }

  &.disableBorder {
    border: 0;
  }
}

:global {
  :local(.button.white:not(.disableBorder)) {
    &.focused::after {
      // White buttons have a border that needs to be compensated for
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
    }  
  }
}
