.button {
  --box-shadow-color: var(--button--background-color--shadow);
  background-color: var(--button--background-color);
  border-radius: var(--button--border-radius);
  border-top-left-radius: var(--button--border-radius--top-left);
  border-top-right-radius: var(--button--border-radius--top-right);
  border-bottom-left-radius: var(--button--border-radius--bottom-left);
  border-bottom-right-radius: var(--button--border-radius--bottom-right);
  border: none;
  border-bottom: 6px solid var(--box-shadow-color);
  box-sizing: border-box;
  color: var(--button--color);
  cursor: pointer;
  display: inline-block;
  font-size: var(--button--font-size--md);
  padding: var(--button--md--padding);
  font-weight: var(--button--font-weight);
  /* margin-top: calc(-1 * var(--padding-1)); */
  outline: none;
  text-align: center;
  transition: all .3s;
  top: 0;
  position: relative;
}

.button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all .3s;
}

.spf-button:active:after {
  top: -4px;
  left: 0;
  right: 0;
  bottom: -0;
}

.button--size-lg {
  font-size: var(--button--font-size--lg);
  padding: var(--button--lg--padding);
}

.button--size-md {
  font-size: var(--button--font-size--md);
  padding: var(--button--md--padding);
}

.button--size-sm {
  font-size: var(--button--font-size--sm);
  padding: var(--button--sm--padding);
}

.button--size-xs {
  font-size: var(--button--font-size--xs);
  padding: var(--button--xs--padding);
}

button:focus {
  text-decoration: underline;
}

button:hover {
  background-color: var(--button--background-color--hover);
  --box-shadow-color: var(--button--background-color--shadow--hover);
}

button:active {
  background-color: var(--button--background-color--active);
  --box-shadow-color: var(--button--background-color--shadow--active);
}

.button:disabled, .button[disabled] {
  background-color: var(--button--background-color--disabled);
  --box-shadow-color: var(--button--background-color--shadow--disabled);
}

.button:active {
  top: 4px;
  border-bottom: 2px solid var(--box-shadow-color);
  /* box-shadow: 0 var(--padding-half) var(--box-shadow-color); */
  /* transform: translateY(var(--padding-1)); */
}

.button--error {
  background-color: #FF3945;
  --box-shadow-color: #E9333D;
}

.button--error:hover {
    background-color: rgb(240, 55, 67);
    --box-shadow-color: rgb(220, 48, 57);
}

.button--error:active {
    background-color: rgb(216, 49, 60);
    --box-shadow-color: rgb(193, 42, 49);
}

.button--success {
  background-color: #75CC31;
  --box-shadow-color: #69B82C;
}

.button--success:hover {
  background-color: rgb(106, 187, 43);
  --box-shadow-color: rgb(96, 167, 41);
}

.button--success:active {
  background-color: rgb(97, 172, 40);
  --box-shadow-color: rgb(86, 150, 38);
}

.button--selected {
  background-color: var(--button--background-color--active);
  --box-shadow-color: var(--button--background-color--shadow--active);
}

:host(.button--full),
:host(.button--full) .button {
  display: block;
  width: 100%;
}