@use "./colours";

@mixin raised_button {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #ccc;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

@mixin uncut_raised_button {
  @include raised_button;
  border-radius: 8px;

  button {
    background: unset;
    border: unset;
    box-shadow: unset;
    color: black;

    &:hover {
      color: black;
    }

    @include colours.highlight;
  }
}

@mixin pill-button($color:false, $button-color: #F80) {
  background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
  background-color: $color;
  background-repeat: repeat-y;
  background-size: cover;
  @if $color {
    background-blend-mode: overlay;
  }
  border-color: $button-color;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  box-shadow: 2px 2px 4px #000;
  color: $button-color;
  cursor: pointer;
  display: inline-block;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  padding: 0 8px;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
}

@mixin mini-button($color:false, $button-color: #F80) {
  @include pill-button($color, $button-color);
  width: 100%;
  border-radius: 2px;
  height: 24px;
  line-height: 24px;
}