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

:root {
  --button-minimal-font-family: var(--font-family);
  --button-minimal-transition-duration: var(--transition-duration);
  --button-minimal-font-size: var(--font-size);
  --button-minimal-font-size-small: var(--font-size-small);
  --button-minimal-font-size-large: var(--font-size-large);
  --button-minimal-padding-small: calc(var(--space-small) * 0.5)
    var(--space-small);
  --button-minimal-padding: calc(var(--space) * 0.5) var(--space);
  --button-minimal-padding-large: calc(var(--space-large) * 0.5)
    var(--space-large);
  --button-minimal-hover-color-mod: 20%;
  --button-minimal-active-color-mod: 2.5%;

  --button-minimal-text-color: var(--ui-text-color);
  --button-minimal-hover-text-color: color-mod(
    var(--button-minimal-text-color) tint(var(--button-minimal-hover-color-mod))
  );
  --button-minimal-active-text-color: color-mod(
    var(--button-minimal-text-color)
      shade(var(--button-minimal-active-color-mod))
  );
  --button-minimal-primary-text-color: var(--color-primary);
  --button-minimal-primary-hover-text-color: color-mod(
    var(--button-minimal-primary-text-color)
      tint(var(--button-minimal-hover-color-mod))
  );
  --button-minimal-primary-active-text-color: color-mod(
    var(--button-minimal-primary-text-color)
      shade(var(--button-minimal-active-color-mod))
  );
  --button-minimal-info-text-color: var(--color-info);
  --button-minimal-info-hover-text-color: color-mod(
    var(--button-minimal-info-text-color)
      tint(var(--button-minimal-hover-color-mod))
  );
  --button-minimal-info-active-text-color: color-mod(
    var(--button-minimal-info-text-color)
      shade(var(--button-minimal-active-color-mod))
  );
  --button-minimal-success-text-color: var(--color-success);
  --button-minimal-success-hover-text-color: color-mod(
    var(--button-minimal-success-text-color)
      tint(var(--button-minimal-hover-color-mod))
  );
  --button-minimal-success-active-text-color: color-mod(
    var(--button-minimal-success-text-color)
      shade(var(--button-minimal-active-color-mod))
  );
  --button-minimal-warning-text-color: var(--color-warning);
  --button-minimal-warning-hover-text-color: color-mod(
    var(--button-minimal-warning-text-color)
      tint(var(--button-minimal-hover-color-mod))
  );
  --button-minimal-warning-active-text-color: color-mod(
    var(--button-minimal-warning-text-color)
      shade(var(--button-minimal-active-color-mod))
  );
  --button-minimal-danger-text-color: var(--color-danger);
  --button-minimal-danger-hover-text-color: color-mod(
    var(--button-minimal-danger-text-color)
      tint(var(--button-minimal-hover-color-mod))
  );
  --button-minimal-danger-active-text-color: color-mod(
    var(--button-minimal-danger-text-color)
      shade(var(--button-minimal-active-color-mod))
  );
}

.container {
  appearance: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  letter-spacing: 0.2px;
  vertical-align: middle;
  font-family: var(--button-minimal-font-family);
  color: var(--button-minimal-text-color);
  font-size: var(--button-minimal-font-size);
  padding: var(--button-minimal-padding);
  line-height: calc(var(--space) * 1.5);
  transition: color var(--button-minimal-transition-duration) linear;
  font-weight: 500;
  background-color: transparent;

  &:hover,
  &:focus {
    color: var(--button-minimal-hover-text-color);
  }

  &:active {
    color: var(--button-minimal-active-text-color);
  }

  &:focus,
  &:active {
    z-index: 1;
  }

  &.disabled,
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
  }

  &.pending {
    opacity: 0.8;
    cursor: progress !important;
  }

  &.fill {
    width: 100%;
  }
}

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

.spinner {
  margin-right: var(--button-pending-margin);
}

/* Sizes */
.small {
  font-size: var(--button-minimal-font-size-small);
  padding: var(--button-minimal-padding-small);
  line-height: calc(var(--space-small) * 1.6);

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

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

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

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

  &:hover,
  &:focus {
    color: var(--button-minimal-primary-hover-text-color);
  }

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

.info {
  color: var(--button-minimal-info-text-color);

  &:hover,
  &:focus {
    color: var(--button-minimal-info-hover-text-color);
  }

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

.danger {
  color: var(--button-minimal-danger-text-color);

  &:hover,
  &:focus {
    color: var(--button-minimal-danger-hover-text-color);
  }

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

.warning {
  color: var(--button-minimal-warning-text-color);

  &:hover,
  &:focus {
    color: var(--button-minimal-warning-hover-text-color);
  }

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

.success {
  color: var(--button-minimal-success-text-color);

  &:hover,
  &:focus {
    color: var(--button-minimal-success-hover-text-color);
  }

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