/*
  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: 17px 32px;
  display: inline-block;
  font: 12px/14px $font-family-primary-bold;
  border-width: 3px !important;
  border-style: solid;
  border-radius: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  outline: none;
  box-shadow: none;

  &.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 Free';
      font-weight: 900;
      position: relative;
      margin-left: 4px;
      top: 0;
      font-size: 12px;
    }
  }

  //--- 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;
      }
    }

    //--- PRIMARY DISABLED
    &.disabled,
    &:disabled,
    &[disabled] {
      color: $color-button-text-primary-disabled;
      background-color: $color-button-bg-primary-disabled;
      border-color: $color-button-border-primary-disabled;

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

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

    //--- PRIMARY INVERTED
    &.inverted {
      color: $color-button-text-primary-inverted;
      background-color: $color-button-bg-primary-inverted;
      border-color: $color-button-border-primary-inverted;

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

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

    //--- PRIMARY DISABLED & INVERTED
    &.disabled.inverted,
    &:disabled.inverted,
    &[disabled].inverted {
      color: $color-button-text-primary-disabled-inverted;
      background-color: $color-button-bg-primary-disabled-inverted;
      border-color: $color-button-border-primary-disabled-inverted;

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

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

  //--- 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;
      }
    }

    //--- SECONDARY DISABLED
    &.disabled,
    &:disabled,
    &[disabled]  {
      color: $color-button-text-secondary-disabled;
      background-color: $color-button-bg-secondary-disabled;
      border-color: $color-button-border-secondary-disabled;

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

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

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

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

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

    //--- SECONDARY DISABLED & INVERTED
    &.disabled.inverted,
    &:disabled.inverted,
    &[disabled].inverted {
      color: $color-button-text-secondary-disabled-inverted;
      background-color: $color-button-bg-secondary-disabled-inverted;
      border-color: $color-button-border-secondary-disabled-inverted;

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

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

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

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

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

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

    //--- GHOST DISABLED
    &.disabled,
    &:disabled,
    &[disabled]  {
      color: $color-button-text-ghost-disabled;
      background-color: $color-button-bg-ghost-disabled;
      border-color: $color-button-border-ghost-disabled;

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

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

    //--- GHOST INVERTED
    &.inverted {
      color: $color-button-text-ghost-inverted;
      background-color: $color-button-bg-ghost-inverted;
      border-color: $color-button-border-ghost-inverted;

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

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

    //--- GHOST DISABLED & INVERTED
    &.disabled.inverted,
    &:disabled.inverted,
    &[disabled].inverted {
      color: $color-button-text-ghost-disabled-inverted;
      background-color: $color-button-bg-ghost-disabled-inverted;
      border-color: $color-button-border-ghost-disabled-inverted;

      @media (hover: hover) {
        &:hover {
          color: $color-button-text-ghost-disabled-inverted-hover;
          background-color: $color-button-bg-ghost-disabled-inverted-hover;
          border-color: $color-button-border-ghost-disabled-inverted-hover;
        }
      }

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

  //--- GHOST DEFAULT
  &.btn-tags {
    color: $color-tags-text-primary;
    background-color: $color-tags-bg-primary;
    border-color: $color-tags-border-primary;

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

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