.make-button-intent(@colors) {
  background-color: @colors[base-color];
  color: @colors[color-99];

  &:hover {
    background-color: @colors[color-40];
    color: @colors[color-99];
  }

  &:active {
    background-color: @colors[color-30];
    color: @colors[color-99];
  }

  &.cr-ct-button--minimal {
    background-color: transparent;
    color: @colors[base-color];
    &:hover {
      background-color: @colors[color-98];
      color: @colors[base-color];
    }

    &:active {
      background-color: @colors[color-95];
      color: @colors[base-color];
    }
  }

  &.cr-ct-button--outlined {
    background-color: transparent;
    color: @colors[base-color];
    border: 1px solid @colors[base-color];
    &:hover {
      background-color: @colors[color-95];
      color: @colors[base-color];
    }

    &:active {
      background-color: @colors[color-95];
      color: @colors[base-color];
    }
  }

  &.cr-ct-button--disabled {
    background-color: @colors[color-95];
    color: @colors[color-100];
    cursor: not-allowed;
  }

  &.cr-ct-button--loading {
    background-color: @colors[color-95];
    color: @colors[color-100];
    cursor: wait;
  }

  > .cr-ct-button__loading-container {
    background: @theme-1-color-80;
  }
}

.cr-ct-button {
  position: relative;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  font-size: 16px;
  padding: 0px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  width: fit-content;

  &--small {
    height: 30px;
    font-size: 14px;
    padding: 0 15px;
  }

  &--medium {
    height: 40px;
  }

  &--large {
    height: 48px;
  }

  &--font-variant-1 {
    font-family: @theme-font-variants[@variant-1][body-font-family];
  }

  &--font-variant-2 {
    font-family: @theme-font-variants[@variant-2][body-font-family];
  }

  &--font-variant-3 {
    font-family: @theme-font-variants[@variant-3][body-font-family];
  }

  &--disable-padding {
    padding: 0 8px;
  }

  &--theme-1 {
    &.cr-ct-button--primary {
      .make-button-intent(@themes[@theme-1][@colors]);
    }
  }

  &--theme-2 {
    &.cr-ct-button--primary {
      .make-button-intent(@themes[@theme-2][@colors]);
    }
  }

  &--theme-3 {
    &.cr-ct-button--primary {
      .make-button-intent(@themes[@theme-3][@colors]);
    }
  }

  &--theme-4 {
    &.cr-ct-button--primary {
      .make-button-intent(@themes[@theme-4][@colors]);
    }
  }

  &--theme-5 {
    &.cr-ct-button--primary {
      .make-button-intent(@themes[@theme-5][@colors]);
    }
  }

  &--theme-6 {
    &.cr-ct-button--primary {
      .make-button-intent(@themes[@theme-6][@colors]);
    }
  }

  &--default {
    background: @theme-secondary-color-100;
    color: @theme-secondary-base-color;
    border: 1px solid @theme-neutral-color-90;

    &:hover {
      background: @theme-neutral-color-95;
      color: @theme-secondary-base-color;
    }

    &:active {
      background: @theme-neutral-color-90;
      color: @theme-secondary-base-color;
    }

    &.cr-ct-button--minimal {
      background: transparent;
      color: @theme-secondary-base-color;
      border: none;
      &:hover {
        background: @theme-neutral-color-95;
        color: @theme-secondary-base-color;
      }

      &:active {
        background: @theme-neutral-color-90;
        color: @theme-secondary-base-color;
      }
    }

    &.cr-ct-button--outlined {
      background: transparent;
      color: @theme-secondary-base-color;
      border: 1px solid @theme-secondary-base-color;
      &:hover {
        background: @theme-neutral-color-95;
        color: @theme-secondary-base-color;
      }

      &:active {
        background: @theme-neutral-color-90;
        color: @theme-secondary-base-color;
      }
    }

    &.cr-ct-button--disabled {
      background: @theme-neutral-color-90;
      color: @theme-neutral-color-99;
      &:hover {
        background: @theme-neutral-color-90;
        color: @theme-neutral-color-99;
      }

      &:active {
        background: @theme-neutral-color-90;
        color: @theme-neutral-color-99;
      }
    }

    &.cr-ct-button--loading {
      background: @theme-neutral-color-90;
      color: @theme-neutral-color-99;
      &:hover {
        background: @theme-neutral-color-90;
        color: @theme-neutral-color-99;
      }

      &:active {
        background: @theme-neutral-color-90;
        color: @theme-neutral-color-99;
      }
    }

    > .cr-ct-button__loading-container {
      background: @theme-neutral-color-80;
    }
  }

  &__loading-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
  }

  &--minimal {
    background: transparent;
  }

  &--outlined {
    background: transparent;
  }

  &--disabled {
    cursor: not-allowed;
  }

  &--loading {
    cursor: not-allowed;
  }
}