@import './variables';

%hover-to-brighten { filter: $hover-filter-bright; }
%hover-to-darken { filter: $hover-filter-dark; }

.btn {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  font-size: $button-font-size;
  line-height: $button-font-size;
  padding: $button-padding-top-bottom $button-padding-left-right;
  border-radius: $button-border-radius;
  background-color: $primary-dark-color;
  color: $button-primary-font-color;

  /* -------------------------- NEW ADDITIONAL SIZES -------------------------- */
  &.sm { transform: $button-sm-size; }
  &.lg { transform: $button-lg-size; }
  
  &.rounded { border-radius: $pill-button-border-radius; }
  &.raised {
    box-shadow: $button-raised-box-shadow;
    &:hover { box-shadow: $button-raised-box-shadow-hover; }
    &:active { box-shadow: $button-raised-box-shadow-active; }
  }
  &.hover-to-lighten {
    &:hover {
      @extend %hover-to-brighten;
      cursor: pointer;
    }
  }

  &.hover-to-darken {
    &:hover {
      @extend %hover-to-darken;
      cursor: pointer;
    }
  }

  /*
    Changes to main color variables applied here. January 12, 2023
  */
  &.primary {
    background-color: $button-primary-color;
    color: $button-primary-font-color;

    &.primary-alt-text { color: $button-primary-font-color-alt; }
    &.default {background-color: $primary-color;}
    &.light { background-color: $primary-light-color; }
    &.medium { background-color: $primary-medium-color; }
    &.dark {background-color: $primary-dark-color; }
  }

  &.secondary {
    background-color: $button-secondary-color;
    color: $button-secondary-font-color;

    &.secondary-alt-text { color: $button-secondary-font-color-alt; }

    &.default { background-color: $secondary-color; }
    &.light { background-color: $secondary-light-color; }
    &.medium { background-color: $secondary-medium-color; }
    &.dark { background-color: $secondary-dark-color; }
  }

  &.accent {
    background-color: $button-accent-color;
    color: $button-accent-font-color;

    &.accent-alt-text { color: $button-accent-font-color-alt; }
    &.default { background-color: $accent-color; }
    &.light { background-color: $accent-light-color; }
    &.medium { background-color: $accent-medium-color; }
    &.dark { background-color: $accent-dark-color; }
  }
}