@harvest-profit/npk/src/BaseButton/BaseButton.module.css

NPK UI Design System

a.ControlButton:hover {
  color: var(--btn-fg-color, var(--control-fg-color));
}

.ControlButton {
  cursor: var(--btn-cursor, pointer);
  appearance: none;
  user-select: none;
  /* Places the border on the inside allowing for borders to not impact button sizes */
  box-sizing: border-box;
  transition: 180ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-property: color, fill, background-color, border-color, box-shadow;

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-width: max-content;
  -webkit-user-select: none;
  text-decoration-line: none;
  gap: var(--control-gap);
  padding: 0 var(--control-padding);
  font-size: var(--control-font-size);
  font-weight: var(--btn-font-weight, var(--control-button-weight));
  height: var(--control-size);
  border-radius: var(--control-radius);

  border: 1px solid var(--btn-border-color, var(--control-border-color));
  background-color: var(--btn-bg-color, var(--control-bg-color));
  color: var(--btn-fg-color, var(--control-fg-color));


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

  &[data-state="active"] {
    background-color: var(--btn-bg-color--active, var(--control-bg-color--active));
  }

  &[aria-expanded="true"] {
    background-color: var(--btn-bg-color--active, var(--control-bg-color--active));
  }

  &:disabled,
  &[data-state="disabled"],
  &[data-state="loading"] {
    --btn-cursor: not-allowed;
    background-color: var(--btn-bg-color--disabled, var(--control-bg-color--disabled));
    color: var(--btn-fg-color--disabled, var(--control-fg-color--disabled));
    border-color: var(--btn-border-color--disabled, var(--control-border-color--disabled));
  }

  &[data-state="loading"] {
    --btn-cursor: progress;
  }

  &>[data-component="contents"] {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    display: grid;
    grid-template-areas: "leadingVisual text trailingVisual";
    grid-template-columns: min-content minmax(0px, auto) min-content;
    align-items: center;
    align-content: center;
    justify-content: center;

    &[data-icon="true"]>[data-component="leadingVisual"] {
      margin-right: 0;
    }

    &>[data-component="loading"] {
      align-self: center;
      justify-self: center;
    }

    &>[data-component="loading"],
    &>[data-component="text"] {
      grid-row: text;
      grid-column: text;
    }

    &>[data-component="leadingVisual"] {
      grid-row: leadingVisual;
      grid-column: leadingVisual;
      margin-right: var(--control-gap);
    }

    &>[data-component="trailingVisual"] {
      grid-row: trailingVisual;
      grid-column: trailingVisual;
      margin-left: var(--control-gap);
    }

    &>[data-component="text"] {
      line-height: calc(1.428571);
      white-space-collapse: collapse;
      text-wrap-mode: nowrap;
    }

    &>[data-component="loading"]+[data-component="text"] {
      visibility: hidden;
    }
  }

  [data-component="ButtonChip"] {
    font-size: 85%;
    display: inline-block;
    padding: 0.25em 0.55em;
    font-weight: 500;
    line-height: 1;
    border-radius: 20px;
    background-color: var(--control-surface-color);
  }

  [data-component="loading"],
  [data-component="leadingVisual"],
  [data-component="trailingVisual"],
  [data-component="trailingAction"] {
    color: var(--btn-visual-color, var(--control-icon-color));
    line-height: 0.9;

    svg {
      display: inline-block;
      vertical-align: text-bottom;
      overflow: visible;
    }
  }

  [data-component="trailingAction"] {
    margin-right: calc(var(--control-gap) / -2);
  }

  /* Sizing */
  &[data-size="sm"] {
    --control-font-size: var(--control-small-font-size);
    --control-size: var(--control-small-size);
    --control-gap: var(--control-small-gap);
    --control-padding: var(--control-small-padding);
  }

  &[data-size="lg"] {
    --control-size: var(--control-large-size);
  }

  &[data-block="true"] {
    width: 100%;
  }

  /* Alignment */
  &[data-alignment="start"]>[data-component="contents"] {
    justify-content: flex-start;
  }

  &[data-alignment="end"]>[data-component="contents"] {
    justify-content: flex-end;
  }
}