@import '@unistylus/core';

.button-outline-danger-xs {
  display: inline-block;
  border-radius: var(--app-size-radius);
  background: none;
  border: var(--app-size-border) solid var(--app-color-danger);
  color: var(--app-color-danger);
  padding: p('*', .375 * 0.6) p('*', .75 * 0.6);
  font-size: calc(0.6 * var(--app-size-font));

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

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

  &:disabled {
    opacity: 1;
    border: var(--app-size-border) solid rgba(var(--app-color-danger-rgb), .5);
    color: rgba(var(--app-color-danger-rgb), .5);
    box-shadow: none;
    background: none;
  }
}