@{dotPrefix}@{component--prefix}-button,
@{component--prefix}-button button {
  border: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  height: @button--height;
  line-height: @button--line-height;
  font-family: @button--font-family;
  font-size: @button--font-size;
  padding: @button--padding;
  letter-spacing: @default--letter-spacing;
  margin: 0 10px;
  border-width: @button--border-width;
  border-style: solid;
  border-radius: 0;

  &[disabled] {
    cursor: not-allowed;
  }

  &:not([disabled]) {
    &:hover {
      background-color: @beyerdynamic-blue !important;
      border-color: @beyerdynamic-blue !important;
    }
  }

  &[no-margin] {
    margin: 0;
  }
}

@{dotPrefix}@{component--prefix}-button,
@{component--prefix}-button {
  button {
    white-space: nowrap;
  }
}

@{dotPrefix}@{component--prefix}-button-link,
a@{dotPrefix}@{component--prefix}-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;

  &:hover {
    color: @white;
    text-decoration: none;
  }

  &:visited,
  &:focus {
    & {
      text-decoration: none;
    }

    &:hover {
      color: @white;
    }
  }
}

@{dotPrefix}@{component--prefix}-button-link--small,
a@{dotPrefix}@{component--prefix}-button--small {
  line-height: @button-small--height - .1875rem;
}

@{dotPrefix}@{component--prefix}-button--small,
@{component--prefix}-button[small] button {
  height: @button-small--height;
  font-size: @button-small--font-size;
  line-height: @button-small--line-height;
  padding: @button-small--padding;
}

// Outline

@{dotPrefix}@{component--prefix}-button--outline,
@{component--prefix}-button[type="outline"] button {
  background-color: transparent;

  &:hover {
    color: @white !important;
  }
}

@{dotPrefix}@{component--prefix}-button--outline-white,
@{component--prefix}-button[type="outline"] button.white {
  border-color: @white;
  color: @black;
}

@{dotPrefix}@{component--prefix}-button--outline-champagne,
@{component--prefix}-button[type="outline"] button.champagne {
  color: @champagne;
  border-color: @champagne;
}

@{dotPrefix}@{component--prefix}-button--outline-red,
@{component--prefix}-button[type="outline"] button.red {
  color: @secondary-red;
  border-color: @secondary-red;
}

@{dotPrefix}@{component--prefix}-button--outline-yellow,
@{component--prefix}-button[type="outline"] button.yellow {
  color: @secondary-yellow;
  border-color: @secondary-yellow;
}

@{dotPrefix}@{component--prefix}-button--outline-green,
@{component--prefix}-button[type="outline"] button.green {
  color: @secondary-green;
  border-color: @secondary-green;
}

// Raised

@{dotPrefix}@{component--prefix}-button--raised,
@{component--prefix}-button[type="raised"] button {
  color: @white;
}

@{dotPrefix}@{component--prefix}-button--raised-white,
@{component--prefix}-button[type="raised"] button.white {
  background-color: @white;
  border-color: @white;
  color: @black;
}

@{dotPrefix}@{component--prefix}-button--raised-white,
@{component--prefix}-button[type="raised"] button.white {
  &:hover {
    color: @white;
  }
}

@{component--prefix}-button[type="raised"] button.white svg * {
  fill: @black !important;
}

@{component--prefix}-button[type="raised"] button.white:hover svg * {
  fill: @white !important;
}

@{dotPrefix}@{component--prefix}-button--raised-champagne,
@{component--prefix}-button[type="raised"] button.champagne {
  background-color: @champagne;
  border-color: @champagne;
}

@{dotPrefix}@{component--prefix}-button--raised-champagne-25,
@{component--prefix}-button[type="raised"] button.champagne-25 {
  background-color: @champagne-25;
  border-color: @champagne-25;
  color: @black;
}

@{dotPrefix}@{component--prefix}-button--raised-champagne-25,
@{component--prefix}-button[type="raised"] button.champagne-25 {
  &:hover {
    color: @white;
  }
}

@{dotPrefix}@{component--prefix}-button--raised-red,
@{component--prefix}-button[type="raised"] button.red {
  background-color: @secondary-red;
  border-color: @secondary-red;
}

@{dotPrefix}@{component--prefix}-button--raised-green,
@{component--prefix}-button[type="raised"] button.green {
  background-color: @secondary-green;
  border-color: @secondary-green;
}

@{dotPrefix}@{component--prefix}-button--raised-yellow,
@{component--prefix}-button[type="raised"] button.yellow {
  background-color: @secondary-yellow;
  border-color: @secondary-yellow;
}

@{dotPrefix}@{component--prefix}-button--has-icon,
@{component--prefix}-button[icon^=""] button {
  padding: 0 @button--padding-left 0 (@button--padding-left / 2);
}

@{dotPrefix}@{component--prefix}-button--has-icon @{dotPrefix}@{component--prefix}-icon,
@{component--prefix}-button[icon^=""] button @{component--prefix}-icon {
  padding-right: @button--padding-left / 2;
  height: 46px;
}

@{dotPrefix}@{component--prefix}-button--has-icon @{dotPrefix}@{component--prefix}-icon @{dotPrefix}@{component--prefix}-icon__icon,
@{component--prefix}-button[icon^=""] button @{component--prefix}-icon svg {
  transform: translate(0, 8px);
}

@{component--prefix}-button[icon^=""] button @{component--prefix}-icon svg * {
  fill: @white !important;
}
