.st-rnd-button {
  --btn-background-color: var(--color-primary-3);
  --btn-background-color-hover: var(--color-primary-4);
  --btn-background-color-active: var(--color-primary-5);
  --btn-border-color: var(--color-primary-6);
  --btn-color: var(--color-primary-12);

  &.button-neutral {
    --btn-background-color: var(--color-neutral-3);
    --btn-background-color-hover: var(--color-neutral-4);
    --btn-background-color-active: var(--color-neutral-5);
    --btn-border-color: var(--color-neutral-6);
    --btn-color: var(--color-neutral-12);
  }
}

.st-rnd-button {
  display: inline-block;

  padding: 4px 8px;

  border-radius: 4px;
  border: 1px solid var(--btn-border-color);
  background-color: var(--btn-background-color);
  color: var(--btn-color);

  font-weight: 600;
  text-align: center;

  cursor: pointer;

  &:hover {
    background-color: var(--btn-background-color-hover);
  }

  &:active {
    background-color: var(--btn-background-color-active);
  }

  &:disabled {
    background-color: color-mix(
      in srgb,
      var(--color-neutral-1) 60%,
      var(--btn-background-color) 40%
    );
    border-color: color-mix(
      in srgb,
      var(--color-neutral-1) 60%,
      var(--btn-border-color) 40%
    );
    color: color-mix(in srgb, var(--color-neutral-1) 60%, var(--btn-color) 40%);

    cursor: not-allowed;
    &:hover {
      background-color: color-mix(
        in srgb,
        var(--color-neutral-1) 60%,
        var(--btn-background-color) 40%
      );
      border-color: color-mix(
        in srgb,
        var(--color-neutral-1) 60%,
        var(--btn-border-color) 40%
      );
      color: color-mix(
        in srgb,
        var(--color-neutral-1) 60%,
        var(--btn-color) 40%
      );
    }
  }

  &.button-icon {
    padding: 4px;
    height: auto;
    width: auto ;
    aspect-ratio: 1;

    font-size: 0.8em;
  }
}