@import '@unistylus/core';

.button-clear-light {
  display: inline-block;
  padding: p('*', .375) p('*', .75);
  background: none;
  border: none;
  border: var(--app-size-border) solid rgba(0, 0, 0, 0);
  border-radius: var(--app-size-radius);
  color: var(--app-color-light);

  & + & {
    margin-right: m('*', .5);
  }

  &:hover {
    outline: 0;
    text-decoration: none;
    background: var(--app-color-light);
    color: var(--app-color-light-contrast);
  }
  
  &:focus, &:active {
    box-shadow: 0 0 0 .25rem rgba(var(--app-color-light-rgb), .3);
    border-color: var(--app-color-light);
  }

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