@import '../global';
@import '../mixins/typography.scss';

@mixin actionable {
  @include action;
  outline: none;

  position: relative;

  box-sizing: border-box;

  border: $border-default;
  border-color: color('gray');
  border-radius: $border-radius;

  height: 52px;
  width: 100%;

  padding: 0px 16px;

  background-color: color('white');

  transition: all 100ms;

  &__danger {
    border-color: color('danger');
    color: color('danger');
    
    background-color: color('danger', 1.25);
  }

  &__success {
    border-color: color('success');
    color: color('success');

    background-color: color('success', 1.25);
  }

  &:disabled,
  &__disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: $opacity-md;
  }
}