/*
  After hours and hours of investigation to find a propper way to manage the stylings of
  the buttons, I ended up by using the forbidden and anti-pattern '!important' statement.
  The reason is the CSS specificity, see: https://css-tricks.com/specifics-on-css-specificity/

  a-tag links have to have the brand specific stylings withing the section templates only.
  So the styling specificity of this links must be at leased 0022. But the buttons which
  can be placed anywhere in the code have at most 0021.
  There is no chance to style the buttons in a generic way what so ever, except overriding
  the buttons in all necessary templates, and that's a mess we already had!

  - DF
*/

.btn {
  white-space: normal;
  text-align: left;
  padding: 10px 20px;
  display: inline-block;
  font: 16px/24px $font-family-primary;
  border-width: 3px !important;
  border-style: solid;
  border-radius: 0;
  outline: none;
  box-shadow: none;

  &:hover {
    text-decoration: none !important;
  }

  &.disabled,
  &:disabled {
    pointer-events: none !important;
    opacity: 1 !important;
  }
  &.small {
    padding: 5px 12px;
  }
  &.medium {
    padding: 13px 24px;
  }
  &.large {
    padding: 17px 32px;
  }
  &.xlarge {
    padding: 21px 32px;
  }

  &.dropdown {
    &:after {
      content: "\f078";
      font-family: 'Font Awesome 5 Pro';
      font-weight: 900;
      position: relative;
      margin-left: 4px;
      top: 0;
      font-size: 12px;
    }
  }

  &.external {
    &:before {
      content: "\f30b";
      font-family: 'Font Awesome 5 Pro';
      font-weight: 900;
      position: relative;
      margin-right: 10px;
    }
  }

  //--- START VARIANTS
  //--- PRIMARY DEFAULT
  &.btn-primary {
    color: $color-button-text-primary;
    background-color: $color-button-bg-primary;
    border-color: $color-button-border-primary;

    &:active {
      color: $color-button-text-primary;
      background-color: $color-button-bg-primary;
      border-color: $color-button-border-primary;
    }

    @media (hover: hover) {
      &:hover {
        color: $color-button-text-primary-hover;
        background-color: $color-button-bg-primary-hover;
        border-color: $color-button-border-primary-hover;
      }
    }
    @media (hover: none) {
      &:hover {
        color: $color-button-text-primary;
        background-color: $color-button-bg-primary;
        border-color: $color-button-border-primary;
      }
    }
  }

  //--- SECONDARY DEFAULT
  &.btn-secondary {
    color: $color-button-text-secondary;
    background-color: $color-button-bg-secondary;
    border-color: $color-button-border-secondary;

    &:active {
      color: $color-button-text-secondary;
      background-color: $color-button-bg-secondary;
      border-color: $color-button-border-secondary;
    }

    @media (hover: hover) {
      &:hover {
        color: $color-button-text-secondary-hover;
        background-color: $color-button-bg-secondary-hover;
        border-color: $color-button-border-secondary-hover;
      }
    }
    @media (hover: none) {
      &:hover {
        color: $color-button-text-secondary;
        background-color: $color-button-bg-secondary;
        border-color: $color-button-border-secondary;
      }
    }
  }
}