/*
  Button
*/

.Button {
  line-height: 1.1;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  letter-spacing: 0.05ch;

  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: var(--button-padding);

  background: var(--button-bg);
  color: var(--button-color);

  border: none;
  border-radius: var(--button-radius);

  cursor: pointer;
}

.Button svg {
  height: var(--button-icon-size);
  width: var(--button-icon-size);
  flex: none;
  fill: var(--button-color);
}

.Button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
}

.Button:focus {
  outline-width: var(--button-outline-width);
  outline-style: var(--button-outline-style);
  outline-color: var(--button-outline-color);
}

.Button:active {
  transform: scale(99%);
}

.Button[variant="hcc"] {
  --button-bg: var(--color-hcc-primary-1);
  --button-hover-bg: var(--color-hcc-primary-2);
}

.Button[variant="subtle"] {
  --button-color: var(--color-grey);
  --button-bg: transparent;
  --button-hover-color: var(--color-grey);
  --button-hover-bg: var(--color-offwhite);
}

.Button[variant="success"] {
  --button-bg: var(--color-success);
}

.Button[variant="delete"] {
  --button-bg: var(--color-danger);
}

.Button[variant="link"] {
  --button-color: var(--color-cc-burgandy);
  --button-bg: transparent;
  --button-hover-color: var(--color-dark);
  --button-hover-bg: transparent;
  padding: 0;
  font-weight: var(--font-medium);
}
.Button[variant="link"]:hover svg {
  fill: var(--color-dark);
}

.Button[variant="delete-link"] {
  --button-color: var(--color-danger);
  --button-bg: transparent;
  --button-hover-color: var(--color-dark);
  --button-hover-bg: transparent;
  padding: 0;
  font-weight: var(--font-medium);
}
.Button[variant="delete-link"]:hover svg {
  fill: var(--color-danger);
}

.u-section-request .Button:not([variant]) {
  --button-bg: var(--button-color-request);
}

.u-section-client .Button:not([variant]) {
  --button-bg: var(--button-color-client);
}

.u-section-hatha .Button:not([variant]) {
  --button-bg: var(--button-color-hatha);
}