@use 'pix-design-tokens/typography';

.proposal-button {
  @extend %pix-body-m;

  width: 100%;
  padding: var(--pix-spacing-3x) var(--pix-spacing-4x);
  text-align: left;
  background: var(--pix-neutral-0);
  border: 1px solid var(--pix-neutral-500);
  border-radius: 8px;
  cursor: pointer;

  &:focus-within {
    border: 1px solid var(--pix-primary-500);
    outline: 2px solid var(--pix-primary-300);
  }

  &:hover,
  &:active {
    background: var(--pix-primary-10);
  }

  &[aria-disabled] {
    cursor: not-allowed;
    pointer-events: none;

    &:hover {
      background: var(--pix-neutral-0);
    }
  }

  &.proposal-button--selected {
    font-weight: var(--pix-font-bold);
  }

  &[aria-disabled]:not(.proposal-button--selected) {
    --state-border-color: var(--pix-neutral-100);

    background: var(--pix-primary-100);
    border-color: var(--state-border-color);
  }
}

.proposal-button--variant-discovery {
  &:hover,
  &:active {
    background: rgb(var(--pix-orga-50-inline), 0.5);
  }

  &.proposal-button--selected {
    background: var(--pix-orga-50);
    border-color: var(--pix-neutral-500);

    &:hover {
      background: var(--pix-orga-50);
    }
  }

  &[aria-disabled]:not(.proposal-button--selected) {
    background: var(--pix-neutral-20);
    border-color: transparent;
  }
}
