$border: 1px solid var(--ps-ui-border);
$border-radius: 4px;

.button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: $border;
  border-radius: $border-radius;

  &[type='button'],
  &[type='reset'],
  &[type='submit'] {
    -webkit-appearance: button;
  }
}

.noIcon {
  min-width: 48px;
}

.noBox {
  border: none;
  border-radius: none;
  background: inherit !important;
}

.customIcon svg {
  width: 1rem;
  margin-right: 5px;
  vertical-align: -0.125em;
}

.iconWithText {
  // icon is on the left
  // some space between the icon and text
  margin-right: 5px;
}

.default {
  background: var(--ps-ui-element-bg-primary);

  &:hover:not(:disabled) {
    background-color: var(--ps-ui-element-bg-highlight);
  }

  &:disabled {
    color: var(--ps-disabled-button-text);
    pointer-events: none;
  }
}

.primary {
  border-color: transparent;
  color: var(--ps-button-switch-text) !important;
  background-color: var(--ps-button-switch-bg);

  &:hover {
    background-color: var(--ps-button-switch-bg-highlight);
  }
  &:disabled {
    background-color: var(--ps-green-disabled);
    pointer-events: none;
  }
}

.secondary {
  border-color: transparent;
  color: var(--ps-immutable-off-white);
  background-color: var(--ps-blue-primary);

  &:hover {
    background-color: var(--ps-blue-highlight);
  }
  &:disabled {
    background-color: var(--ps-blue-disabled);
    pointer-events: none;
  }
}

.float {
  @extend .default;
  border-color: transparent;
  background-color: transparent;
}

.danger {
  border-color: transparent;
  color: var(--ps-neutral-2);
  background-color: var(--ps-red-primary);
  &:hover {
    background-color: var(--ps-red-highlight);
  }
  &:disabled {
    background-color: var(--ps-red-disabled);
    pointer-events: none;
  }
}

.outline {
  @extend .default;
  background-color: transparent;

  &:hover:not(:disabled) {
    background-color: rgba(144, 202, 249, 0.08);
  }
}

// only the first and last elements should have styling
.grouped {
  margin: 0;
  border-right: 0;
  border-radius: 0;

  // give it a bit more room to breath
  padding-left: 12px;
  padding-right: 12px;
}
.grouped:first-child {
  border-left: $border;

  border-radius: $border-radius 0 0 $border-radius;
}
.grouped:last-child {
  border-right: $border;

  border-radius: 0 $border-radius $border-radius 0;
}