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

@import '../../styles/variables.css';

:root {
  --button-next-font-family: var(--default-font-family);
  --button-next-font-weight: 400;
  --button-next-font-size: var(--default-font-size-large);
  --button-next-line-height: 26px;
  --button-next-size-modifier: 0.25;
  --button-next-padding-top: var(--default-padding-small);
  --button-next-padding-right: calc(var(--default-padding-large) * 1.5);
  --button-next-padding-bottom: var(--default-padding-small);
  --button-next-padding-left: calc(var(--default-padding-large) * 1.5);
  --button-next-background-color: #705eff;
  --button-next-hover-background-color: #9b40ff;
  --button-next-border-radius: 50px;
  --button-next-min-width: 140px;
  --button-next-transition-duration: var(--default-transition-duration);
}

.container {
  all: initial;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  transition: all var(--button-next-transition-duration) ease;
  text-align: center;
  border: 0;
  outline: none;
  font-family: var(--button-next-font-family);
  font-weight: var(--button-next-font-weight);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
  background-color: var(--button-next-background-color);
  color: white;
  min-width: var(--button-next-min-width);

  &:hover,
  &:focus {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--button-next-hover-background-color);
  }
  &:active {
    background-color: var(--button-next-hover-background-color);
    box-shadow: 0 5px 15px -2px rgba(0, 0, 0, 0.3);
  }

  &[disabled] {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    background-color: var(--button-next-background-color);
    color: white;
    opacity: 0.8;
    cursor: default;
  }
}

.wide {
  width: 100%;
}

.pending {
  cursor: wait !important;
}

.spinner {
  stroke: white;
}

.rounded {
  border-radius: var(--button-next-border-radius);
}

/* Sizes */
.small {
  padding-top: calc(
    var(--button-next-padding-top) * (1 - var(--button-next-size-modifier))
  );
  padding-right: calc(
    var(--button-next-padding-right) * (1 - var(--button-next-size-modifier))
  );
  padding-bottom: calc(
    var(--button-next-padding-bottom) * (1 - var(--button-next-size-modifier))
  );
  padding-left: calc(
    var(--button-next-padding-left) * (1 - var(--button-next-size-modifier))
  );
  font-size: calc(
    var(--button-next-font-size) * (1 - var(--button-next-size-modifier))
  );
  line-height: calc(
    var(--button-next-line-height) * (1 - var(--button-next-size-modifier))
  );
}

.normal {
  padding-top: var(--button-next-padding-top);
  padding-right: var(--button-next-padding-right);
  padding-bottom: var(--button-next-padding-bottom);
  padding-left: var(--button-next-padding-left);
  font-size: var(--button-next-font-size);
  line-height: var(--button-next-line-height);
}

.large {
  padding-top: calc(
    var(--button-next-padding-top) * (1 + var(--button-next-size-modifier))
  );
  padding-right: calc(
    var(--button-next-padding-right) * (1 + var(--button-next-size-modifier))
  );
  padding-bottom: calc(
    var(--button-next-padding-bottom) * (1 + var(--button-next-size-modifier))
  );
  padding-left: calc(
    var(--button-next-padding-left) * (1 + var(--button-next-size-modifier))
  );
  font-size: calc(
    var(--button-next-font-size) * (1 + var(--button-next-size-modifier))
  );
  line-height: calc(
    var(--button-next-line-height) * (1 + var(--button-next-size-modifier))
  );

  & .spinner {
    margin-top: -6px;
  }
}