@use '../helpers/functions' as *;

.button {
  // VARIABLES
  $gradient: linear-gradient(180deg, $primary-50, $primary-40);

  $height: (
    sm: 35px,
    md: 40px,
    lg: 48px,
  );

  $padding: (
    sm: 0 pxToRem(20),
    md: 0 pxToRem(22),
    lg: 0 pxToRem(28),
  );

  // STYLES

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  color: $neutral-100;
  text-decoration: none;

  height: map-get($height, md);
  padding: map-get($padding, md);
  font-weight: 600;
  font-size: map-get($font-sizes-text, md);
  z-index: 1;

  // VARIANTS
  &_contained {
    background: $gradient;
    border: none;
    box-shadow: 0 2px 1px 0 $primary-60 inset;

    &:hover {
      background: $primary-50;
      box-shadow: 0 2px 1px 0 $primary-70 inset;
    }

    &:active {
      background: $primary-50;
      box-shadow:
        0 2px 1px 0 $primary-60 inset,
        0 0 0 2px rgba(220, 36, 76, 0.4);
    }

    &.button_disabled,
    &:disabled {
      background: $primary-70;
      box-shadow: none;
    }
  }

  &_outlined {
    background: none;
    box-shadow: 0 0 0 1px $neutral-60;
    box-sizing: border-box;

    &:hover {
      box-shadow: 0 0 0 2px #b4bacc;
    }

    &:active {
      box-shadow: 0 0 0 2px $neutral-98;
    }

    &.button_disabled,
    &:disabled {
      box-shadow: 0 0 0 1px $neutral-60;
      opacity: 0.2;
    }
  }

  &_disabled {
    cursor: not-allowed;
    pointer-events: none;
  }

  // SIZE
  &_sm {
    height: map-get($height, sm);
    padding: map-get($padding, sm);
  }

  &_md {
    height: map-get($height, md);
    padding: map-get($padding, md);
  }

  &_lg {
    height: map-get($height, lg);
    padding: map-get($padding, lg);
    font-size: map-get($font-sizes-text, l);
  }
}