button.ui,
a.ui.button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

button.ui.filled,
a.ui.button.filled {
  padding: 14px 29px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  line-height: 17px;
  text-shadow: 0 5px 0 rgb(0 0 0 / 0.04);
  background-color: var(--color-ragusa-blue);
  border-radius: 8px;
}

button.ui.filled:disabled,
a.ui.button.filled.disabled {
  color: #ffffff;
  background-color: #c8c9cd;
}

button.ui.filled:not(:disabled):hover,
a.ui.button.filled:not(.disabled):hover {
  color: #ffffff;
  background-color: var(--color-hover);
}

button.ui.text,
a.ui.button.text {
  padding: 8px 16px;
  color: #000000;
  font-weight: 600;
  font-size: 14px;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  line-height: 17px;
  background-color: transparent;
  border-radius: 8px;
}

button.ui.text:hover,
a.ui.button.text:hover {
  color: var(--color-hover);
}

button.ui.outlined,
a.ui.button.outlined {
  padding: 14px 29px;
  color: #ffffff;
  color: var(--color-ragusa-blue);
  font-weight: 600;
  font-size: 14px;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  line-height: 17px;
  text-shadow: 0 5px 0 rgb(0 0 0 / 0.04);
  background-color: transparent;
  border: var(--color-ragusa-blue) 1px solid;
  border-radius: 8px;
}

button.ui.outlined:hover,
a.ui.button.outlined:hover {
  color: var(--color-hover);
  border-color: var(--color-hover);
}

button.ui :not(svg)[fill],
a.button.ui :not(svg)[fill] {
  transition:
    fill 150ms ease,
    stroke 150ms ease;
}

button.ui.filled :not(svg)[stroke],
a.ui.button.filled :not(svg)[stroke] > * {
  stroke: #ffffff;
}

button.ui.outlined :not(svg)[fill] {
  fill: #000000;
}

button.ui.filled :not(svg)[fill],
a.ui.button.filled :not(svg)[fill] {
  fill: #ffffff;
}

a.ui.button.outlined :not(svg)[fill] {
  fill: #000000;
}

button.ui.outlined :not(svg)[stroke],
a.ui.button.outlined :not(svg)[stroke] > * {
  stroke: #000000;
}

button.ui.text:hover :not(svg)[fill],
a.ui.button.text:hover :not(svg)[fill] {
  fill: var(--color-hover);
}

button.ui.text:hover :not(svg)[stroke],
a.ui.button.text:hover :not(svg)[stroke] > * {
  stroke: var(--color-hover);
}