/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

:root {
  --button-font-size: var(--font-size);
  --button-font-size-small: var(--font-size-small);
  --button-font-size-large: var(--font-size-large);
  --button-border-radius-small: 2px;
  --button-border-radius: 3px;
  --button-border-radius-large: 4px;
  --button-outline-width: 3px;
  --button-text-shadow: 0 1px 1px color-mod(#000 alpha(20%));
  --button-padding-small: calc(var(--space-small) * 0.5)
    calc(var(--space-small) * 1.5);
  --button-padding: calc(var(--space) * 0.5) calc(var(--space) * 1.5);
  --button-padding-large: calc(var(--space-large) * 0.5)
    calc(var(--space-large) * 1.5);
  --button-hover-color-mod: 10%;
  --button-active-color-mod: 2.5%;
  --button-disabled-opacity: 60%;
  --button-pending-opacity: 80%;
  --button-background: var(--color-default);
  --button-text-color: #fff;
  --button-background-hover: color-mod(
    var(--button-background) tint(var(--button-hover-color-mod))
  );
  --button-background-active: color-mod(
    var(--button-background) shade(var(--button-active-color-mod))
  );
  --button-background-disabled: color-mod(
    var(--button-background) alpha(var(--button-disabled-opacity))
  );
  --button-background-pending: color-mod(
    var(--button-background) alpha(var(--button-pending-opacity))
  );
  --button-outline-color: color-mod(
    var(--button-background) alpha(50%) tint(10%)
  );
  --button-primary-background: var(--color-primary);
  --button-primary-background-hover: color-mod(
    var(--button-primary-background) tint(var(--button-hover-color-mod))
  );
  --button-primary-background-active: color-mod(
    var(--button-primary-background) shade(var(--button-active-color-mod))
  );
  --button-primary-background-disabled: color-mod(
    var(--button-primary-background) alpha(var(--button-disabled-opacity))
  );
  --buttom-primary-background-pending: color-mod(
    var(--button-primary-background) alpha(var(--button-pending-opacity))
  );
  --button-primary-outline-color: color-mod(
    var(--button-primary-background) alpha(50%) tint(10%)
  );
  --button-info-background: var(--color-info);
  --button-info-background-hover: color-mod(
    var(--button-info-background) tint(var(--button-hover-color-mod))
  );
  --button-info-background-active: color-mod(
    var(--button-info-background) shade(var(--button-active-color-mod))
  );
  --button-info-background-disabled: color-mod(
    var(--button-info-background) alpha(var(--button-disabled-opacity))
  );
  --buttom-info-background-pending: color-mod(
    var(--button-info-background) alpha(var(--button-pending-opacity))
  );
  --button-info-outline-color: color-mod(
    var(--button-info-background) alpha(50%) tint(10%)
  );
  --button-danger-background: var(--color-danger);
  --button-danger-background-hover: color-mod(
    var(--button-danger-background) tint(var(--button-hover-color-mod))
  );
  --button-danger-background-active: color-mod(
    var(--button-danger-background) shade(var(--button-active-color-mod))
  );
  --button-danger-background-disabled: color-mod(
    var(--button-danger-background) alpha(var(--button-disabled-opacity))
  );
  --buttom-danger-background-pending: color-mod(
    var(--button-danger-background) alpha(var(--button-pending-opacity))
  );
  --button-danger-outline-color: color-mod(
    var(--button-danger-background) alpha(50%) tint(10%)
  );
  --button-warning-background: var(--color-warning);
  --button-warning-background-hover: color-mod(
    var(--button-warning-background) tint(var(--button-hover-color-mod))
  );
  --button-warning-background-active: color-mod(
    var(--button-warning-background) shade(var(--button-active-color-mod))
  );
  --button-warning-background-disabled: color-mod(
    var(--button-warning-background) alpha(var(--button-disabled-opacity))
  );
  --buttom-warning-background-pending: color-mod(
    var(--button-warning-background) alpha(var(--button-pending-opacity))
  );
  --button-warning-outline-color: color-mod(
    var(--button-warning-background) alpha(50%) tint(10%)
  );
  --button-success-background: var(--color-success);
  --button-success-background-hover: color-mod(
    var(--button-success-background) tint(var(--button-hover-color-mod))
  );
  --button-success-background-active: color-mod(
    var(--button-success-background) shade(var(--button-active-color-mod))
  );
  --button-success-background-disabled: color-mod(
    var(--button-success-background) alpha(var(--button-disabled-opacity))
  );
  --buttom-success-background-pending: color-mod(
    var(--button-success-background) alpha(var(--button-pending-opacity))
  );
  --button-success-outline-color: color-mod(
    var(--button-success-background) alpha(50%) tint(10%)
  );
  --button-transition-duration: var(--transition-duration);
}

/* Styles */
.container {
  border: none;
  outline: none;
  font-family: var(--font-family);
  display: inline-flex;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  align-items: center;
  justify-content: center;
  position: relative;
  letter-spacing: 0.2px;
  vertical-align: middle;
  transition-timing-function: ease;
  transition-duration: var(--button-transition-duration);
  transition-property: color, background, box-shadow, text-shadow;
  font-weight: 500;
  margin: 0;
}

.spinner {
  pointer-events: none;

  & > div {
    background-color: #fff;
  }
}

.icon {
  margin-left: -10px;
  margin-right: 6px;
  color: currentColor !important;
}

/* States */
.container {
  color: var(--button-text-color);
  background-color: var(--button-background);
  text-shadow: var(--button-text-shadow);

  &:hover {
    background-color: var(--button-background-hover);
  }

  &:focus {
    z-index: 1;
    box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color);
    background-color: var(--button-background-hover);
  }

  &:active {
    background-color: var(--button-background-active);
    z-index: 1;
  }

  &.disabled,
  &:disabled {
    background-color: var(--button-background-disabled);
    text-shadow: none;
    cursor: not-allowed !important;
  }

  &.pending {
    background-color: var(--button-background-pending);
    text-shadow: none;
    cursor: progress !important;
  }

  &.fill {
    width: 100%;
  }
}

/* Sizes */
.container {
  border-radius: var(--button-border-radius);
  line-height: calc(var(--space) * 1.5);
  font-size: var(--button-font-size);
  padding: var(--button-padding);

  &.small {
    border-radius: var(--button-border-radius-small);
    line-height: calc(var(--space-small) * 1.6);
    font-size: var(--button-font-size-small);
    padding: var(--button-padding-small);

    & .icon {
      margin-left: -6px;
    }
  }

  &.large {
    border-radius: var(--button-border-radius-large);
    line-height: calc(var(--space-large) * 1.2);
    font-size: var(--button-font-size-large);
    padding: var(--button-padding-large);

    & .icon {
      margin-left: -14px;
      margin-top: -1px;
      margin-bottom: -1px;
      margin-right: 8px;
    }
  }
}

/* Colors */
.primary {
  background-color: var(--button-primary-background);

  &:hover {
    background-color: var(--button-primary-background-hover);
  }

  &:focus {
    box-shadow: 0 0 0 var(--button-outline-width)
      var(--button-primary-outline-color);
    background-color: var(--button-primary-background-hover);
  }

  &:active {
    background-color: var(--button-primary-background-active);
  }

  &.disabled,
  &:disabled {
    background-color: var(--button-primary-background-disabled);
  }

  &.pending {
    background-color: var(--buttom-primary-background-pending);
  }
}

.info {
  background-color: var(--button-info-background);

  &:hover {
    background-color: var(--button-info-background-hover);
  }

  &:focus {
    box-shadow: 0 0 0 var(--button-outline-width)
      var(--button-info-outline-color);
    background-color: var(--button-info-background-hover);
  }

  &:active {
    background-color: var(--button-info-background-active);
  }

  &.disabled,
  &:disabled {
    background-color: var(--button-info-background-disabled);
  }

  &.pending {
    background-color: var(--buttom-info-background-pending);
  }
}

.danger {
  background-color: var(--button-danger-background);

  &:hover {
    background-color: var(--button-danger-background-hover);
  }

  &:focus {
    box-shadow: 0 0 0 var(--button-outline-width)
      var(--button-danger-outline-color);
    background-color: var(--button-danger-background-hover);
  }

  &:active {
    background-color: var(--button-danger-background-active);
  }

  &.disabled,
  &:disabled {
    background-color: var(--button-danger-background-disabled);
  }

  &.pending {
    background-color: var(--buttom-danger-background-pending);
  }
}

.warning {
  background-color: var(--button-warning-background);

  &:hover {
    background-color: var(--button-warning-background-hover);
  }

  &:focus {
    box-shadow: 0 0 0 var(--button-outline-width)
      var(--button-warning-outline-color);
    background-color: var(--button-warning-background-hover);
  }

  &:active {
    background-color: var(--button-warning-background-active);
  }

  &.disabled,
  &:disabled {
    background-color: var(--button-warning-background-disabled);
  }

  &.pending {
    background-color: var(--buttom-warning-background-pending);
  }
}

.success {
  background-color: var(--button-success-background);

  &:hover {
    background-color: var(--button-success-background-hover);
  }

  &:focus {
    box-shadow: 0 0 0 var(--button-outline-width)
      var(--button-success-outline-color);
    background-color: var(--button-success-background-hover);
  }

  &:active {
    background-color: var(--button-success-background-active);
  }

  &.disabled,
  &:disabled {
    background-color: var(--button-success-background-disabled);
  }

  &.pending {
    background-color: var(--buttom-success-background-pending);
  }
}