@gravity-ui/uikit/build/esm/components/Button/Button.css

Gravity UI base styling and components

@charset "UTF-8";
.g-button {
  --_--text-color: var(--g-color-text-primary);
  --_--text-color-hover: var(--_--text-color);
  --_--background-color: transparent;
  --_--background-color-hover: var(--g-color-base-simple-hover);
  --_--border-width: 0;
  --_--border-color: currentColor;
  --_--focus-outline-color: var(--g-color-line-focus);
  --_--focus-outline-offset: 0;
  --_--font-size: var(--g-text-body-1-font-size);
  padding: 0;
  font-family: var(--g-text-body-font-family);
  font-size: inherit;
  font-weight: var(--g-text-body-font-weight);
  color: inherit;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  height: var(--g-button-height, var(--_--height));
  line-height: var(--g-button-height, var(--_--height));
  font-size: var(--g-button-font-size, var(--_--font-size));
  user-select: none;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--g-button-text-color, var(--_--text-color));
  background: transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: transform 0.1s ease-out, color 0.15s linear;
  transform: scale(1);
  display: inline-flex;
  justify-content: center;
  padding: 0 var(--g-button-padding, var(--_--padding));
  gap: var(--g-button-icon-offset, var(--_--icon-offset));
}
.g-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--g-button-background-color, var(--_--background-color));
  border: var(--g-button-border-width, var(--_--border-width)) var(--g-button-border-style, solid) var(--g-button-border-color, var(--_--border-color));
  transition: background-color 0.15s linear;
}
.g-button:hover {
  color: var(--g-button-text-color-hover, var(--_--text-color-hover));
}
.g-button:hover::before {
  background-color: var(--g-button-background-color-hover, var(--_--background-color-hover));
}
.g-button:focus-visible::before {
  outline: var(--g-button-focus-outline-color, var(--_--focus-outline-color)) var(--g-button-focus-outline-style, solid) var(--g-button-focus-outline-width, 2px);
  outline-offset: var(--g-button-focus-outline-offset, var(--_--focus-outline-offset));
}
.g-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: scale(1);
  transition: none;
}
.g-button:active {
  transition: none;
  transform: scale(0.96);
}
.g-button:active::after {
  transform: scale(1.042);
}
.g-button_size_xs {
  --_--height: 20px;
  --_--border-radius: var(--g-border-radius-xs);
  --_--padding: 6px;
  --_--icon-space: 12px;
  --_--icon-offset: 4px;
}
.g-button_size_s {
  --_--height: 24px;
  --_--border-radius: var(--g-border-radius-s);
  --_--padding: 8px;
  --_--icon-space: 16px;
  --_--icon-offset: 4px;
}
.g-button_size_m {
  --_--height: 28px;
  --_--border-radius: var(--g-border-radius-m);
  --_--padding: 12px;
  --_--icon-space: 16px;
  --_--icon-offset: 8px;
}
.g-button_size_l {
  --_--height: 36px;
  --_--border-radius: var(--g-border-radius-l);
  --_--padding: 16px;
  --_--icon-space: 16px;
  --_--icon-offset: 8px;
}
.g-button_size_xl {
  --_--height: 44px;
  --_--border-radius: var(--g-border-radius-xl);
  --_--padding: 24px;
  --_--icon-space: 20px;
  --_--icon-offset: 12px;
  --_--font-size: var(--g-text-body-2-font-size);
}
.g-button_view_normal {
  --_--background-color: var(--g-color-base-generic);
  --_--background-color-hover: var(--g-color-base-generic-hover);
}
.g-button_view_action {
  --_--text-color: var(--g-color-text-brand-contrast);
  --_--background-color: var(--g-color-base-brand);
  --_--background-color-hover: var(--g-color-base-brand-hover);
  --_--focus-outline-color: var(--g-color-base-brand);
  --_--focus-outline-offset: 1px;
}
.g-button_view_outlined {
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-generic);
}
.g-button_view_outlined-info {
  --_--text-color: var(--g-color-text-info);
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-info);
}
.g-button_view_outlined-success {
  --_--text-color: var(--g-color-text-positive);
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-positive);
}
.g-button_view_outlined-warning {
  --_--text-color: var(--g-color-text-warning);
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-warning);
}
.g-button_view_outlined-danger {
  --_--text-color: var(--g-color-text-danger);
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-danger);
}
.g-button_view_outlined-utility {
  --_--text-color: var(--g-color-text-utility);
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-utility);
}
.g-button_view_outlined-action {
  --_--text-color: var(--g-color-text-brand);
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-brand);
}
.g-button_view_raised {
  --_--background-color-hover: var(--g-color-base-float-hover);
  background: var(--g-color-base-float);
}
.g-button_view_raised::before {
  box-shadow: 0 3px 5px var(--g-color-sfx-shadow);
}
.g-button_view_raised:active::before {
  box-shadow: 0 1px 2px var(--g-color-sfx-shadow);
}
.g-button_view_flat-secondary {
  --_--text-color: var(--g-color-text-secondary);
  --_--text-color-hover: var(--g-color-text-primary);
}
.g-button_view_flat-info {
  --_--text-color: var(--g-color-text-info);
}
.g-button_view_flat-success {
  --_--text-color: var(--g-color-text-positive);
}
.g-button_view_flat-warning {
  --_--text-color: var(--g-color-text-warning);
}
.g-button_view_flat-danger {
  --_--text-color: var(--g-color-text-danger);
}
.g-button_view_flat-utility {
  --_--text-color: var(--g-color-text-utility);
}
.g-button_view_flat-action {
  --_--text-color: var(--g-color-text-brand);
}
.g-button_view_normal-contrast {
  --_--text-color: var(--g-color-text-dark-primary);
  --_--background-color: var(--g-color-base-light);
  --_--background-color-hover: var(--g-color-base-light-hover);
  --_--focus-outline-color: var(--g-color-line-light);
}
.g-button_view_normal-contrast.g-button_loading {
  --_--background-color-hover: var(--g-color-base-simple-hover);
}
.g-button_view_outlined-contrast {
  --_--text-color: var(--g-color-text-light-primary);
  --_--background-color-hover: var(--g-color-base-light-simple-hover);
  --_--border-width: 1px;
  --_--border-color: var(--g-color-line-light);
  --_--focus-outline-color: var(--g-color-line-light);
}
.g-button_view_flat-contrast {
  --_--text-color: var(--g-color-text-light-primary);
  --_--background-color-hover: var(--g-color-base-light-simple-hover);
  --_--focus-outline-color: var(--g-color-line-light);
}
.g-button.g-button_pin_round-round.g-button {
  border-radius: var(--g-button-border-radius, var(--_--border-radius));
}
.g-button.g-button_pin_brick-brick.g-button {
  border-radius: 0;
}
.g-button.g-button_pin_clear-clear.g-button {
  border-radius: 0;
  border-inline: 0;
}
.g-button.g-button_pin_circle-circle.g-button {
  border-radius: 100px;
}
.g-button.g-button_pin_round-brick.g-button {
  border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-start-end-radius: 0;
  border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-end-radius: 0;
}
.g-button.g-button_pin_brick-round.g-button {
  border-start-start-radius: 0;
  border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-start-radius: 0;
  border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius));
}
.g-button.g-button_pin_round-clear.g-button {
  border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-start-end-radius: 0;
  border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-end-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-round.g-button {
  border-start-start-radius: 0;
  border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-start-radius: 0;
  border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-inline-start: 0;
}
.g-button.g-button_pin_brick-clear.g-button {
  border-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-brick.g-button {
  border-radius: 0;
  border-inline-start: 0;
}
.g-button.g-button_pin_circle-brick.g-button {
  border-start-start-radius: 100px;
  border-start-end-radius: 0;
  border-end-start-radius: 100px;
  border-end-end-radius: 0;
}
.g-button.g-button_pin_brick-circle.g-button {
  border-start-start-radius: 0;
  border-start-end-radius: 100px;
  border-end-start-radius: 0;
  border-end-end-radius: 100px;
}
.g-button.g-button_pin_circle-clear.g-button {
  border-start-start-radius: 100px;
  border-start-end-radius: 0;
  border-end-start-radius: 100px;
  border-end-end-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-circle.g-button {
  border-start-start-radius: 0;
  border-start-end-radius: 100px;
  border-end-start-radius: 0;
  border-end-end-radius: 100px;
  border-inline-start: 0;
}
.g-button.g-button_pin_round-round::before {
  border-radius: var(--g-button-border-radius, var(--_--border-radius));
}
.g-button.g-button_pin_brick-brick::before {
  border-radius: 0;
}
.g-button.g-button_pin_clear-clear::before {
  border-radius: 0;
  border-inline: 0;
}
.g-button.g-button_pin_circle-circle::before {
  border-radius: 100px;
}
.g-button.g-button_pin_round-brick::before {
  border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-start-end-radius: 0;
  border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-end-radius: 0;
}
.g-button.g-button_pin_brick-round::before {
  border-start-start-radius: 0;
  border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-start-radius: 0;
  border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius));
}
.g-button.g-button_pin_round-clear::before {
  border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-start-end-radius: 0;
  border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-end-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-round::before {
  border-start-start-radius: 0;
  border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-start-radius: 0;
  border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-inline-start: 0;
}
.g-button.g-button_pin_brick-clear::before {
  border-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-brick::before {
  border-radius: 0;
  border-inline-start: 0;
}
.g-button.g-button_pin_circle-brick::before {
  border-start-start-radius: 100px;
  border-start-end-radius: 0;
  border-end-start-radius: 100px;
  border-end-end-radius: 0;
}
.g-button.g-button_pin_brick-circle::before {
  border-start-start-radius: 0;
  border-start-end-radius: 100px;
  border-end-start-radius: 0;
  border-end-end-radius: 100px;
}
.g-button.g-button_pin_circle-clear::before {
  border-start-start-radius: 100px;
  border-start-end-radius: 0;
  border-end-start-radius: 100px;
  border-end-end-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-circle::before {
  border-start-start-radius: 0;
  border-start-end-radius: 100px;
  border-end-start-radius: 0;
  border-end-end-radius: 100px;
  border-inline-start: 0;
}
.g-button.g-button_pin_round-round::after {
  border-radius: var(--g-button-border-radius, var(--_--border-radius));
}
.g-button.g-button_pin_brick-brick::after {
  border-radius: 0;
}
.g-button.g-button_pin_clear-clear::after {
  border-radius: 0;
  border-inline: 0;
}
.g-button.g-button_pin_circle-circle::after {
  border-radius: 100px;
}
.g-button.g-button_pin_round-brick::after {
  border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-start-end-radius: 0;
  border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-end-radius: 0;
}
.g-button.g-button_pin_brick-round::after {
  border-start-start-radius: 0;
  border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-start-radius: 0;
  border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius));
}
.g-button.g-button_pin_round-clear::after {
  border-start-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-start-end-radius: 0;
  border-end-start-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-end-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-round::after {
  border-start-start-radius: 0;
  border-start-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-end-start-radius: 0;
  border-end-end-radius: var(--g-button-border-radius, var(--_--border-radius));
  border-inline-start: 0;
}
.g-button.g-button_pin_brick-clear::after {
  border-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-brick::after {
  border-radius: 0;
  border-inline-start: 0;
}
.g-button.g-button_pin_circle-brick::after {
  border-start-start-radius: 100px;
  border-start-end-radius: 0;
  border-end-start-radius: 100px;
  border-end-end-radius: 0;
}
.g-button.g-button_pin_brick-circle::after {
  border-start-start-radius: 0;
  border-start-end-radius: 100px;
  border-end-start-radius: 0;
  border-end-end-radius: 100px;
}
.g-button.g-button_pin_circle-clear::after {
  border-start-start-radius: 100px;
  border-start-end-radius: 0;
  border-end-start-radius: 100px;
  border-end-end-radius: 0;
  border-inline-end: 0;
}
.g-button.g-button_pin_clear-circle::after {
  border-start-start-radius: 0;
  border-start-end-radius: 100px;
  border-end-start-radius: 0;
  border-end-end-radius: 100px;
  border-inline-start: 0;
}
.g-button__text {
  display: inline-block;
  white-space: nowrap;
}
.g-button__icon {
  display: inline-block;
  position: relative;
  margin: 0 calc((var(--g-button-height, var(--_--height)) - var(--g-button-icon-space, var(--_--icon-space))) / 2 * -1);
  width: var(--g-button-height, var(--_--height));
  height: var(--g-button-height, var(--_--height));
}
.g-button__icon::after {
  content: " ";
  visibility: hidden;
}
.g-button__icon-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-button__icon_side_start {
  order: -1;
}
.g-button__icon_side_end {
  order: 1;
}
.g-button__icon:only-child {
  margin: 0;
}
.g-button:has(.g-button__icon:only-child) {
  --_--padding: 0;
}
.g-button:has(.g-button__icon:only-child):not(.g-button_width_max) {
  width: var(--g-button-height, var(--_--height));
}
.g-button_selected:not(.g-button_view_outlined-contrast) {
  --_--border-width: 0;
}
.g-button_selected:not(.g-button_view_normal-contrast,
.g-button_view_flat-contrast,
.g-button_view_outlined-contrast) {
  --_--text-color: var(--g-color-text-brand-heavy);
  --_--background-color: var(--g-color-base-selection);
  --_--background-color-hover: var(--g-color-base-selection-hover);
}
.g-button_selected.g-button_view_outlined-info, .g-button_selected.g-button_view_flat-info {
  --_--text-color: var(--g-color-text-info-heavy);
  --_--background-color: var(--g-color-base-info-light);
  --_--background-color-hover: var(--g-color-base-info-light-hover);
}
.g-button_selected.g-button_view_outlined-success, .g-button_selected.g-button_view_flat-success {
  --_--text-color: var(--g-color-text-positive-heavy);
  --_--background-color: var(--g-color-base-positive-light);
  --_--background-color-hover: var(--g-color-base-positive-light-hover);
}
.g-button_selected.g-button_view_outlined-warning, .g-button_selected.g-button_view_flat-warning {
  --_--text-color: var(--g-color-text-warning-heavy);
  --_--background-color: var(--g-color-base-warning-light);
  --_--background-color-hover: var(--g-color-base-warning-light-hover);
}
.g-button_selected.g-button_view_outlined-danger, .g-button_selected.g-button_view_flat-danger {
  --_--text-color: var(--g-color-text-danger-heavy);
  --_--background-color: var(--g-color-base-danger-light);
  --_--background-color-hover: var(--g-color-base-danger-light-hover);
}
.g-button_selected.g-button_view_outlined-utility, .g-button_selected.g-button_view_flat-utility {
  --_--text-color: var(--g-color-text-utility-heavy);
  --_--background-color: var(--g-color-base-utility-light);
  --_--background-color-hover: var(--g-color-base-utility-light-hover);
}
.g-button_disabled {
  cursor: default;
  pointer-events: none;
}
.g-button_disabled:not(.g-button_loading) {
  --_--text-color: var(--g-color-text-hint);
  --_--background-color: var(--g-color-base-generic-accent-disabled);
  --_--background-color-hover: var(--g-color-base-generic-accent-disabled);
  --_--border-width: 0;
}
.g-button_disabled:not(.g-button_loading):is(.g-button_view_normal-contrast, .g-button_view_outlined-contrast) {
  --_--text-color: var(--g-color-text-light-secondary);
  --_--background-color: var(--g-color-base-light-disabled);
  --_--background-color-hover: var(--g-color-base-light-disabled);
}
.g-button_disabled:not(.g-button_loading):is(.g-button_view_flat,
.g-button_view_flat-secondary,
.g-button_view_flat-info,
.g-button_view_flat-success,
.g-button_view_flat-warning,
.g-button_view_flat-danger,
.g-button_view_flat-utility,
.g-button_view_flat-action,
.g-button_view_flat-contrast) {
  --_--text-color: var(--g-color-text-hint);
  --_--background-color: transparent;
  --_--background-color-hover: transparent;
}
.g-button_disabled:not(.g-button_loading).g-button_view_flat-contrast {
  --_--text-color: var(--g-color-text-light-hint);
}
.g-button_disabled:active {
  transform: scale(1);
}
.g-button_loading::before {
  background-image: repeating-linear-gradient(-45deg, var(--g-button-background-color, var(--_--background-color)), var(--g-button-background-color, var(--_--background-color)) 4px, var(--g-button-background-color-hover, var(--_--background-color-hover)) 4px, var(--g-button-background-color-hover, var(--_--background-color-hover)) 8px);
  background-size: 150%;
  background-clip: padding-box;
  animation: g-loading-animation 0.5s linear infinite;
}
.g-button_width_auto {
  max-width: 100%;
}
.g-button_width_max {
  width: 100%;
}
.g-button_width_auto .g-button__text, .g-button_width_max .g-button__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}