:root {
  --icon-button-dimension: 44px;
  --icon-button-small-dimension: 32px;
  --icon-button-icon-dimension: 22px;

  --regular-button-height: 44px;
  --compact-button-height: 36px;
  --very-compact-button-height: 26px;

  --button-velocity: 300ms;
}

@define-mixin button-variant $labelColor, $backgroundColor, $hoverBackgroundColor, $activeBackgroundColor {
  color: $labelColor;
  background-color: $backgroundColor;

  &:hover,
  &.Button--hover {
    background-color: $hoverBackgroundColor;
  }

  &:focus,
  &.Button--focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-brand-700);
  }

  &:active,
  &.Button--active {
    background-color: $activeBackgroundColor;
  }

  &:disabled {
    background-color: var(--color-neutral-300);
    color: var(--color-neutral-700);
    cursor: initial;
  }
}

@define-mixin button-link $color, $hoverColor {
  color: $color;
  background-color: transparent;
  text-decoration: none;

  &:hover,
  &.Button--hover {
    text-decoration: underline;
    color: $hoverColor;
  }

  &:active,
  &.Button--active {
    text-decoration: underline;
  }

  &:focus,
  &.Button--focus {
    box-shadow: 0 0 0 2px var(--color-brand-700);
  }

  &:disabled {
    color: var(--color-neutral-700);
    text-decoration: none;
    cursor: initial;
  }
}

.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* TODO find a better solution when dealing with long labels that break lines... */
  padding: 10px 20px;

  border: none;
  border-radius: var(--border-radius);

  min-height: var(--regular-button-height);
  font-size: var(--font-size);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;

  cursor: pointer;

  transition: box-shadow var(--button-velocity);
}

.Button--accent {
  @mixin button-variant
    #fff,
    var(--color-accent-500),
    var(--color-accent-400),
    var(--color-accent-500);
}

.Button--flatAccent {
  @mixin button-variant
    #fff,
    var(--color-accent-500),
    var(--color-accent-400),
    var(--color-accent-400);

  box-shadow: none;
}

.Button--green {
  @mixin button-variant
    #fff,
    var(--color-green-700),
    var(--color-green-800),
    var(--color-green-700);
}

.Button--blue {
  @mixin button-variant
    #fff,
    var(--color-brand-500),
    var(--color-brand-600),
    var(--color-brand-600);
}

.Button--yellow {
  @mixin button-variant
    var(--color-neutral-800),
    var(--color-yellow-400),
    var(--color-yellow-300),
    var(--color-yellow-400);
}

.Button--white {
  @mixin button-variant var(--color-neutral-800), #fff, var(--color-neutral-200), #fff;
}

.Button--whiteWithBorder {
  @mixin button-variant var(--color-neutral-800), #fff, var(--color-neutral-200), #fff;
  border: 1px solid var(--color-neutral-300);
}

.Button--linkBlue {
  @mixin button-link var(--color-brand-500), var(--color-brand-600);
}

.Button--linkBanner {
  @mixin button-link var(--color-brand-600), var(--color-brand-700);
}

.Button--linkWhite {
  @mixin button-link #fff, #fff;

  &:hover,
  &.Button--hover,
  &:active,
  &.Button--active {
    color: #fff;
  }
}
.Button--linkDark {
  @mixin button-link var(--color-neutral-800), var(--color-neutral-700);
}

.Button--linkRed {
  @mixin button-link var(--color-red-500), var(--color-red-600);
}

.Button--flatAccent,
.Button--linkDark,
.Button--linkBlue,
.Button--linkRed,
.Button--linkWhite,
.Button--linkBanner {
  &:focus,
  &.Button--focus {
    outline: none;
  }
}

.Button-subLabel {
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-medium);
}

.Button-icon {
  margin-top: -1px;
  flex: 0 0 var(--icon-button-icon-dimension);
  vertical-align: middle;
}

.Button-icon:first-child {
  margin-right: var(--space);
  margin-left: -4px;
}

.Button-icon:last-child {
  margin-right: -4px;
  margin-left: var(--space);
}

.Button-label {
  text-align: left;
  line-height: 1.4;
}

.Button--multiLabelButton {
  padding: 5px 20px 4px;

  & .Button-contentWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .Button-label,
  & .Button-subLabel {
    white-space: nowrap;
  }

  & .Button-label:first-child {
    margin-bottom: 2px;
  }

  & .Button-subLabel:first-child {
    margin-bottom: 2px;
  }
}

.Button--iconButton {
  width: var(--icon-button-dimension);
  height: var(--icon-button-dimension);
  min-height: auto;

  padding: 0;
  border-radius: var(--icon-button-dimension);

  &.Button--small {
    width: var(--icon-button-small-dimension);
    height: var(--icon-button-small-dimension);
    border-radius: var(--icon-button-small-dimension);
  }

  & .Button-icon {
    margin: 0;
  }
}

.Button-labelOverlay {
  display: none;
}

.Button--loading {
  position: relative;

  & .Button-label,
  & .Button-icon {
    opacity: 0;
  }

  & .Button-labelOverlay {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
  }
}

.Button--responsive {
  @media (--small-device) {
    & .Button-label {
      display: none;
    }

    & .Button-icon {
      margin: 0;
    }
  }
}

.Button--compact {
  min-height: var(--compact-button-height);
  padding: 0 var(--space-2x);
}

.Button--very-compact {
  font-size: var(--font-size-tiny);
  min-height: var(--very-compact-button-height);
  padding: 0 var(--space-2x);

  & .Button-icon {
    width: var(--space-2x);
  }
}