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

:root {
  --button-round-font-family: var(--font-family);
  --button-round-transition-duration: var(--transition-duration);

  --button-round-text-color: #a8abb5;
  --button-round-background-color: color-mod(
    var(--button-round-text-color) alpha(12%)
  );

  --button-round-font-size: var(--font-size);
  --button-round-font-size-small: var(--font-size-small);
  --button-round-font-size-large: var(--font-size-large);

  --button-round-padding-small: calc(var(--space-small) * 0.5)
    calc(var(--space-small) * 2);
  --button-round-padding: calc(var(--space) * 0.5) calc(var(--space) * 2);
  --button-round-padding-large: calc(var(--space-large) * 0.5)
    calc(var(--space-large) * 2);

  --button-round-primary-text-color: var(--color-primary);
  --button-round-primary-background-color: color-mod(
    var(--button-round-primary-text-color) blend(#fff 91%)
  );
  --button-round-info-text-color: var(--color-info);
  --button-round-info-background-color: color-mod(
    var(--button-round-info-text-color) blend(#fff 91%)
  );
  --button-round-success-text-color: var(--color-success);
  --button-round-success-background-color: color-mod(
    var(--button-round-success-text-color) blend(#fff 91%)
  );
  --button-round-warning-text-color: var(--color-warning);
  --button-round-warning-background-color: color-mod(
    var(--button-round-warning-text-color) blend(#fff 91%)
  );
  --button-round-danger-text-color: var(--color-danger);
  --button-round-danger-background-color: color-mod(
    var(--button-round-danger-text-color) blend(#fff 91%)
  );
}

.container {
  border: none;
  outline: none;
  border-radius: 1000px;
  font-family: var(--button-round-font-family);
  color: var(--button-round-text-color);
  box-shadow: 0 5px 10px 0 rgba(198, 199, 200, 0.6);
  font-size: var(--button-round-font-size);
  background-color: var(--button-round-background-color);
  display: inline-flex;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  align-items: center;
  justify-content: center;
  position: relative;
  letter-spacing: -0.5px;
  vertical-align: middle;
  transition: box-shadow var(--button-round-transition-duration) linear;
  font-weight: 500;

  &:hover,
  &:focus {
    box-shadow: 0 5px 10px 0 rgba(198, 199, 200, 0.7);
  }

  &:active {
    box-shadow: 0 3px 8px -1px rgba(198, 199, 200, 0.6);
  }

  &.pending {
    text-shadow: none;
    box-shadow: 0 6px 11px 0 rgba(198, 199, 200, 0.68) !important;
    cursor: progress !important;
  }

  &.fill {
    width: 100%;
  }

  &.disabled {
    opacity: 0.6;
    box-shadow: 0 6px 11px 0 rgba(198, 199, 200, 0.6) !important;
    cursor: not-allowed !important;
  }
}

.spinner {
  opacity: 0.7;
  pointer-events: none;
  margin-right: var(--button-pending-margin);
}

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

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

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

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

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

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

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

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

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

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

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