@mixin button {
  @include reset-button;
  border: $border;
  border-radius: 6px;
  background-color: $cream;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;

  @each $text, $color in $theme-colors {
    &.o2-button-#{$text} {
      background-color: $color;
      color: $white;
      border: none;
      &:hover {
        background-color: darken($color, 10%);
      }
    }
  }
}

.o2-button {
  @include button;
}

.o2-button-large {
  @include button;
  padding: 8px 24px;
  font-size: 1rem;
}

.o2-button-icon {
  @include button;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .material-icons {
    margin-left: 4px;
  }
}

.o2-reset-button {
  @include reset-button;
}
