/* stylelint-disable no-descending-specificity */
.Button {
  --Button-backgroundColorActive: var(--color-accent-shade-2);
  --Button-backgroundColorHover: var(--color-accent-shade-1);
  --Button-borderColorActive: var(--color-accent-shade-5);
  --Button-borderColorHover: var(--color-accent-shade-3);
  --Button-textColor: var(--color-text-shade-1);
  --Button-textColorActive: var(--color-accent-shade-5);
  --Button-textColorHover: var(--color-accent-shade-3);

  border-color: var(--Button-borderColor, var(--Button-textColor));
  background-color: var(--Button-backgroundColor);
  color: var(--Button-textColor);
  text-decoration: none;
  transition-property: border-color, background-color, color, opacity;
  transition-duration: var(--transition-duration--fast);
  transition-timing-function: var(--transition-timing-function);
  appearance: none;

  &:focus {
    outline: 0;
  }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:active,
  &[disabled].Button--active {
    opacity: 0.5;
    cursor: default;
  }

  &:hover:not([disabled]) {
    cursor: pointer;
    border-color: var(--Button-borderColorHover, var(--Button-borderColor));
    background-color: var(--Button-backgroundColorHover, var(--Button-backgroundColor));
    color: var(--Button-textColorHover, var(--Button-textColor));
    opacity: 1;
  }

  &.Button--active:not([disabled]),
  &:active:not([disabled]) {
    border-color: var(--Button-borderColorActive, var(--Button-borderColor));
    background-color: var(--Button-backgroundColorActive);
    color: var(--Button-textColorActive, var(--Button-textColor));
  }
}

.Button--primary {
  --Button-backgroundColor: var(--color-text-shade-1);
  --Button-backgroundColorActive: var(--color-accent-shade-5);
  --Button-backgroundColorHover: var(--color-accent-shade-3);
  --Button-borderColor: var(--color-text-shade-1);
  --Button-textColor: var(--color-background-shade-1);
  --Button-textColorActive: var(--color-white);
  --Button-textColorHover: var(--color-white);
}

.Button--accent {
  --Button-backgroundColorActive: var(--color-accent-shade-2);
  --Button-backgroundColorHover: var(--color-accent-shade-1);
  --Button-borderColorActive: var(--color-accent-shade-5);
  --Button-borderColorHover: var(--color-accent-shade-3);
  --Button-textColor: var(--color-accent-shade-4);
  --Button-textColorActive: var(--color-accent-shade-5);
  --Button-textColorHover: var(--color-accent-shade-3);

  &.Button--primary {
    --Button-backgroundColor: var(--color-accent-shade-4);
    --Button-backgroundColorActive: var(--color-accent-shade-5);
    --Button-backgroundColorHover: var(--color-accent-shade-3);
    --Button-borderColor: var(--color-accent-shade-4);
    --Button-textColor: var(--color-white);
    --Button-textColorActive: var(--color-white);
    --Button-textColorHover: var(--color-white);
  }
}

.Button--positive {
  --Button-backgroundColorActive: var(--color-positive-shade-2);
  --Button-backgroundColorHover: var(--color-positive-shade-1);
  --Button-borderColorActive: var(--color-positive-shade-5);
  --Button-borderColorHover: var(--color-positive-shade-3);
  --Button-textColor: var(--color-positive-shade-4);
  --Button-textColorActive: var(--color-positive-shade-5);
  --Button-textColorHover: var(--color-positive-shade-3);

  &.Button--primary {
    --Button-backgroundColor: var(--color-positive-shade-4);
    --Button-backgroundColorActive: var(--color-positive-shade-5);
    --Button-backgroundColorHover: var(--color-positive-shade-3);
    --Button-borderColor: var(--color-positive-shade-4);
    --Button-textColor: var(--color-white);
    --Button-textColorActive: var(--color-white);
    --Button-textColorHover: var(--color-white);
  }
}

.Button--negative {
  --Button-backgroundColorActive: var(--color-negative-shade-2);
  --Button-backgroundColorHover: var(--color-negative-shade-1);
  --Button-borderColorActive: var(--color-negative-shade-5);
  --Button-borderColorHover: var(--color-negative-shade-3);
  --Button-textColor: var(--color-negative-shade-4);
  --Button-textColorActive: var(--color-negative-shade-5);
  --Button-textColorHover: var(--color-negative-shade-3);

  &.Button--primary {
    --Button-backgroundColor: var(--color-negative-shade-4);
    --Button-backgroundColorActive: var(--color-negative-shade-5);
    --Button-backgroundColorHover: var(--color-negative-shade-3);
    --Button-borderColor: var(--color-negative-shade-4);
    --Button-textColor: var(--color-white);
    --Button-textColorActive: var(--color-white);
    --Button-textColorHover: var(--color-white);
  }
}

.Button--tertiary {
  --Button-backgroundColor: transparent;
  --Button-borderColor: transparent;
  --Button-borderColorHover: transparent;
  --Button-borderColorActive: transparent;
}

.Buttons--joined-horizontal > .Button {
  &:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &:not(:last-child) {
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &.Button--active,
    &:not([disabled]):hover,
    &:not([disabled]):active {
      border-right-width: var(--border-size--x2);

      & + .Button {
        border-left-width: 0;
      }
    }
  }
}

.Buttons--joined-vertical > .Button {
  &:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &:not(:last-child) {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    &.Button--active,
    &:not([disabled]):hover,
    &:not([disabled]):active {
      border-bottom-width: var(--border-size--x2);

      & + .Button {
        border-top-width: 0;
      }
    }
  }
}