.button, .btn {
  &:not(.button--outline) {
    box-shadow: inset 0 0 0 2px var(--button-background);

    &:not([disabled]):hover {
      --button-background-opacity: 1;
      background-color: rgb(var(--button-text-color) / 1) !important;
      color: rgb(var(--button-background) / 1);
      box-shadow: inset 0 0 0 2px rgb(var(--button-background));
    }
  }
  
  &.button--outline {
    &:not([disabled]):hover {
      --button-background-opacity: 1;
      background-color: rgb(var(--button-outline-color) / var(--button-background-opacity, 1));
      color: rgb(var(--button-text-color) / 1);
      box-shadow: inset 0 0 0 2px rgb(var(--button-outline-color) / var(--button-background-opacity, 1));
    }
  }
}