@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/fonts';

.button {
  padding: 5px;
  color: var(--pix-neutral-0);
  font-weight: 500;
  font-size: 1rem;
  font-family: fonts.$font-roboto;
  letter-spacing: 0.012rem;
  text-align: center;
  background-color: var(--pix-primary-500);
  border: none;
  border-radius: 5px;
  outline: none;
  cursor: pointer;

  &:hover,
  &:active,
  &:focus {
    background-color: var(--pix-primary-700);
  }

  &--link {
    text-decoration: none;

    &:hover,
    &:active,
    &:focus {
      color: var(--pix-neutral-0);
      text-decoration: none;
    }
  }

  &--uppercase {
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  &--round {
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 25px;
  }

  &--thin {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  &--extra-thin {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.938rem;
  }

  &--regular {
    width: 120px;
  }

  &--big {
    width: 180px;
  }

  &--extra-big {
    width: 280px;
  }

  &--grey {
    color: var(--pix-neutral-800);
    background: var(--pix-neutral-20);
    border: 2px solid var(--pix-neutral-500);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--pix-neutral-20);
      border: 2px solid var(--pix-neutral-800);
    }
  }

  &--green {
    color: var(--pix-neutral-0);
    background: var(--pix-success-500);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--pix-success-700);
    }
  }

  &--red {
    color: var(--pix-neutral-0);
    background: var(--pix-error-700);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--pix-error-700);
      border: 2px solid var(--pix-warning-500);
    }
  }

  &--yellow {
    color: var(--pix-neutral-900);
    font-weight: var(--pix-font-bold);
    font-size: 0.906rem;
    background: var(--pix-warning-100);
    box-shadow:
      0 2px 6px 0 rgb(12 22 58 / 11%),
      0 1px 3px 0 rgb(0 0 0 / 8%);

    &:hover,
    &:active,
    &:focus {
      color: var(--pix-neutral-900);
      background-color: var(--pix-warning-100);
    }
  }

  &--dark-grey {
    color: var(--pix-neutral-0);
    font-weight: var(--pix-font-bold);
    font-size: 0.938rem;
    background-color: var(--pix-neutral-500);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--pix-neutral-800);
    }
  }

  &--white {
    color: var(--pix-neutral-900);
    background-color: var(--pix-neutral-0);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--pix-neutral-20);
    }
  }

  &--no-color {
    color: var(--pix-neutral-900);
    background-color: transparent;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--pix-neutral-20);
    }
  }

  &--border-focus {
    border: 2px solid transparent;

    &:focus,
    &:hover,
    &:focus-within {
      border: 2px solid var(--pix-neutral-0);
      box-shadow: 0 0 0 2px var(--pix-primary-500);
    }
  }

  @include breakpoints.device-is('tablet') {
    padding: 14px 20px;
  }
}

.icon-button {
  padding: 4px 8px;
  color: var(--pix-neutral-500);
  font-size: 1rem;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  transition: 0.2s ease;

  &:hover,
  &:active {
    background-color: var(--pix-neutral-20);
  }
}

.loader-in-button {
  display: flex;
  background: url('/images/loader-white.svg') no-repeat center;
  background-size: 50px;
}

.link {
  color: var(--pix-tertiary-500);
  text-decoration: none;
  background-color: inherit;
  border: none;
  outline: none;

  &:hover,
  &:focus,
  &:active {
    color: var(--pix-primary-700);
    text-decoration: underline;
    cursor: pointer;
  }

  &:focus-visible {
    border-radius: 2px;
    outline: 1.5px solid var(--pix-primary-500);
    outline-offset: 1px;
  }

  &--underline {
    text-decoration: underline;
  }

  &--grey {
    color: var(--pix-neutral-500);
  }
}
