@import "./properties.css";

.button {
  align-items: center;
  border-radius: var(--button-border-radius);
  border: none;
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--button-font-family);
  font-style: var(--button-font-style);
  font-weight: var(--button-font-weight);
  justify-content: center;
  letter-spacing: var(--button-letter-spacing);
  overflow: hidden;
  position: relative;
  transform: translate3d(0, 0, 0);
  user-select: var(--button-user-select);
  vertical-align: text-top;
  white-space: nowrap;
  word-break: keep-all;
}

.textButton {
  text-transform: var(--button-text-button-transform);
}

.textButton:first-letter {
  text-transform: var(--button-text-button-first-letter-transform);
}

.ripple {
  background-image: var(--button-ripple-background);
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: scale(10);
  transition: var(--button-ripple-transition);
  width: 100%;
}

.spinner {
  animation: spinner 0.8s linear infinite;
  border: 1px solid currentColor;
  border-radius: 100%;
  border-top-color: transparent;
  display: inline-flex;
  height: 14px;
  transition: all 0.2s;
  width: 14px;

  &.endAlign {
    margin-left: 4px;
  }

  &.startAlign {
    margin-right: 4px;
  }
}

.spinnerOnly {
  margin-right: 0;
  position: absolute;
}

/* This is used to show only the loader spinner when the component is loading */

.hiddenChildren > *:not(.spinner) {
  visibility: hidden;
}

.absolute {
  position: absolute;
}

.button:active:not(:disabled) .ripple {
  opacity: var(--button-ripple-active-opacity);
  transform: scale(0);
  transition: 0s;
}

.button:focus {
  outline: none;
}

.button::-moz-focus-inner {
  border: 0;
}

/* icon alignment */

.button svg {

  &:first-child {
    margin: var(--button-icon-start-margin);
  }

  &:last-of-type:not(:first-child) {
    margin: var(--button-icon-end-margin);
  }
}

/* button icon */

.button.iconButton {

  &.tiny,
  &.default,
  &.huge {
    padding: var(--button-icon-padding);
  }

  &.tiny {
    width: var(--button-icon-width-tiny);
  }

  &.default {
    width: var(--button-icon-width-default);
  }

  &.huge {
    width: var(--button-icon-width-huge);
  }

  & svg {
    margin: var(--button-only-icon-margin);
  }

  &.circle {
    border-radius: var(--butoon-icon-circle-border-radius);
  }
}

/* button sizes */

.tiny {
  font-size: var(--button-tiny-font-size);
  height: var(--button-tiny-height);
  padding: var(--button-tiny-padding);

  & > .spinner {
    height: 12px;
    width: 12px;

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

    &.startAlign {
      margin-right: 6px;
    }
  }
}

.default {
  font-size: var(--button-default-font-size);
  height: var(--button-default-height);
  padding: var(--button-default-padding);
}

.huge {
  font-size: var(--button-huge-font-size);
  height: var(--button-huge-height);
  padding: var(--button-huge-padding);

  & > .spinner {
    height: 18px;
    width: 18px;

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

    &.startAlign {
      margin-right: 6px;
    }
  }
}

/* button relevances */

.normalRelevance {

  &.flat,
  &.outline {

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

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

  &.flat {
    background-color: var(--button-normal-relevance-flat-background-color);

    &:focus:not(:active) {
      box-shadow: var(--button-normal-relevance-boxshadow-focus);
    }
  }

  &.outline {
    background: transparent;
    border-color: var(--button-normal-relevance-outline-border-color);
    border-style: solid;
    border-width: var(--button-normal-relevance-outline-border-width);
    color: var(--button-normal-relevance-outline-color);

    &:hover,
    &:active,
    &:focus {
      color: var(--button-normal-relevance-outline-color-enter);
    }

    &:hover,
    &:active {
      border-color: transparent;
    }

    &:focus:not(:active) {
      background-color: var(--button-normal-relevance-outline-background-color-focus);
      border-color: var(--button-normal-relevance-outline-border-color-focus);
      box-shadow: var(--button-normal-relevance-outline-boxshadow-focus);
    }
  }

  &.clean {
    background: transparent;
    color: var(--button-normal-relevance-clean-color);

    &:hover {
      color: var(--button-normal-relevance-clean-color-hover);
    }

    &:active {
      color: var(--button-normal-relevance-clean-color-active);
    }

    &:focus:not(:active) {
      color: var(--button-normal-relevance-clean-color-focus);
    }
  }
}

.highRelevance {

  &.flat,
  &.outline {

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

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

  &.flat {
    background-color: var(--button-high-relevance-flat-background-color);

    &:focus:not(:active) {
      box-shadow: var(--button-high-relevance-boxshadow-focus);
    }
  }

  &.outline {
    background: transparent;
    border-color: var(--button-high-relevance-outline-border-color);
    border-style: solid;
    border-width: var(--button-high-relevance-outline-border-width);
    color: var(--button-high-relevance-outline-color);

    &:hover,
    &:active,
    &:focus {
      color: var(--button-high-relevance-outline-color-enter);
    }

    &:hover,
    &:active {
      border-color: transparent;
    }

    &:focus:not(:active) {
      background-color: var(--button-high-relevance-outline-background-color-focus);
      border-color: var(--button-high-relevance-outline-border-color-focus);
      box-shadow: var(--button-high-relevance-outline-boxshadow-focus);
    }
  }

  &.clean {
    background: transparent;
    color: var(--button-high-relevance-clean-color);

    &:hover {
      color: var(--button-high-relevance-clean-color-hover);
    }

    &:active {
      color: var(--button-high-relevance-clean-color-active);
    }

    &:focus:not(:active) {
      color: var(--button-high-relevance-clean-color-focus);
    }
  }
}

.lowRelevance {

  &.flat,
  &.outline {

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

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

  &.flat {
    background-color: var(--button-low-relevance-flat-background-color);

    &:focus:not(:active) {
      box-shadow: var(--button-low-relevance-boxshadow-focus);
    }
  }

  &.outline {
    background: transparent;
    border-color: var(--button-low-relevance-outline-border-color);
    border-style: solid;
    border-width: var(--button-low-relevance-outline-border-width);
    color: var(--button-low-relevance-outline-color);

    &:hover,
    &:active,
    &:focus:not(:active) {
      color: var(--button-low-relevance-outline-color-enter);
    }

    &:hover,
    &:active {
      border-color: transparent;
    }

    &:focus:not(:active) {
      background-color: var(--button-low-relevance-outline-background-color-focus);
      border-color: var(--button-low-relevance-outline-border-color-focus);
      box-shadow: var(--button-low-relevance-outline-boxshadow-focus);
    }
  }

  &.clean {
    background: transparent;
    color: var(--button-low-relevance-clean-color);

    &:hover {
      color: var(--button-low-relevance-clean-color-hover);
    }

    &:active {
      color: var(--button-low-relevance-clean-color-active);
    }

    &:focus:not(:active) {
      color: var(--button-low-relevance-clean-color-focus);
    }
  }
}

/* disabled button style */

.button,
.clean,
.outline {

  &.button:disabled:hover,
  &.button:disabled {
    cursor: not-allowed;
    color: var(--button-disabled-color);
  }
}

.iconButton.outline,
.flat {

  &.button:disabled,
  &.button:disabled:hover {
    background-color: var(--button-disabled-background-color);
    background-image: none;
  }
}

.outline,
.clean {

  &.button:disabled,
  &.button:disabled:hover {
    background: transparent;
  }
}

.outline {

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

.fullWidth {
  width: 100%;
}

.inline {
  padding: 0 var(--button-inline-padding);
  height: auto;
}

@keyframes spinner {

  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(1turn);
  }
}