@import '@unistylus/core';

.button-foreground {
  display: inline-block;
  border: none;
  border-radius: var(--app-size-radius);
  padding: p('*', .375) p('*', .75);
  background: var(--app-color-foreground);
  color: var(--app-color-foreground-contrast);

  & + & {
    margin-right: m('*', .5);
  }
  
  &:hover, &:focus, &:active {
    outline: 0;
    background: var(--app-color-foreground-shade);
    color: var(--app-color-foreground-contrast);
    text-decoration: none;
  }

  &:focus, &:active {
    box-shadow: 0 0 0 .25rem rgba(var(--app-color-foreground-rgb), .3);
  }

  &:disabled {
    opacity: 1;
    background: rgba(var(--app-color-foreground-rgb), .5);
    color: rgba(var(--app-color-foreground-contrast-rgb), .5);
    box-shadow: none;
  }
}