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

NPK UI Design System

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

.ControlButton {
  cursor: pointer;
  cursor: var(--btn-cursor, pointer);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -moz-user-select: 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: -moz-max-content;
  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));
}

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

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

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

.ControlButton:disabled,.ControlButton[data-state="disabled"],.ControlButton[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));
  }

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

.ControlButton > [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"]:is(.ControlButton > [data-component="contents"]) > [data-component="leadingVisual"] {
      margin-right: 0;
    }

:is(.ControlButton > [data-component="contents"]) > [data-component="loading"] {
      align-self: center;
      justify-self: center;
    }

:is(.ControlButton > [data-component="contents"]) > [data-component="loading"],:is(.ControlButton > [data-component="contents"]) > [data-component="text"] {
      grid-row: text;
      grid-column: text;
    }

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

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

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

:is(.ControlButton > [data-component="contents"]) > [data-component="loading"] + [data-component="text"] {
      visibility: hidden;
    }

.ControlButton [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);
  }

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

:is(.ControlButton [data-component="loading"],.ControlButton [data-component="leadingVisual"],.ControlButton [data-component="trailingVisual"],.ControlButton [data-component="trailingAction"]) svg {
      display: inline-block;
      vertical-align: text-bottom;
      overflow: visible;
    }

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

/* Sizing */

.ControlButton[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);
  }

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

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

/* Alignment */

.ControlButton[data-alignment="start"] > [data-component="contents"] {
    justify-content: flex-start;
  }

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