@ozen-ui/kit/__inner__/esm/components/ButtonNext/Button.css

React component library

/* stylelint-disable */
.ButtonNext {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: var(--button-font-color);
  block-size: var(--button-height);
  min-inline-size: var(--button-min-width);
  padding: 0 var(--button-padding-x);
  background-color: var(--button-bg-color);
  border-radius: var(--button-border-radius);
  transition:
    background-color var(--transition-default),
    border-color var(--transition-default),
    box-shadow var(--transition-default),
    opacity var(--transition-default);
  -webkit-tap-highlight-color: unset;
  position: relative;
}
.ButtonNext > svg {
    flex-shrink: 0;
  }
.ButtonNext_size_2xs {
      --button-height: var(--control-height-2xs);
      --button-padding-x: var(--control-padding-xs);
      --button-border-radius: var(--border-radius-m);
      --button-min-width: 56px;

      font: var(--typography-text-2xs-font);

      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);

      text-transform: var(--typography-text-2xs-text_transform, none);
    }
.ButtonNext_size_xs {
      --button-height: var(--control-height-xs);
      --button-padding-x: var(--control-padding-xs);
      --button-border-radius: var(--border-radius-m);
      --button-min-width: 64px;

      font: var(--typography-text-xs-font);

      letter-spacing: var(--typography-text-xs-letter_spacing, 0);

      text-transform: var(--typography-text-xs-text_transform, none);
    }
.ButtonNext_size_s {
      --button-height: var(--control-height-s);
      --button-padding-x: var(--control-padding-s);
      --button-border-radius: var(--border-radius-l);
      --button-min-width: 72px;

      font: var(--typography-text-s-font);

      letter-spacing: var(--typography-text-s-letter_spacing, 0);

      text-transform: var(--typography-text-s-text_transform, none);
    }
.ButtonNext_size_m {
      --button-height: var(--control-height-m);
      --button-padding-x: var(--control-padding-m);
      --button-border-radius: var(--border-radius-l);
      --button-min-width: 80px;

      font: var(--typography-text-m-font);

      letter-spacing: var(--typography-text-m-letter_spacing, 0);

      text-transform: var(--typography-text-m-text_transform, none);
    }
.ButtonNext_size_l {
      --button-height: var(--control-height-l);
      --button-padding-x: var(--control-padding-l);
      --button-border-radius: var(--border-radius-l);
      --button-min-width: 88px;

      font: var(--typography-text-l-font);

      letter-spacing: var(--typography-text-l-letter_spacing, 0);

      text-transform: var(--typography-text-l-text_transform, none);
    }
/** contained */
.ButtonNext_variant_contained.ButtonNext_color_primary {
    --button-bg-color: var(--color-background-action);
    --button-bg-color-hover: var(--color-background-action-hover);
    --button-bg-color-active: var(--color-background-action-pressed);
    --button-bg-color-focus: var(--color-background-action-hover);
    --button-font-color: var(--color-content-action-on);
    --button-font-color-hover: var(--color-content-action-on);
    --button-font-color-active: var(--color-content-action-on);
    --button-font-color-focus: var(--color-content-action-on);
  }
.ButtonNext_variant_contained.ButtonNext_color_secondary {
    --button-bg-color: var(--color-background-action-secondary);
    --button-bg-color-hover: var(--color-background-action-secondary-hover);
    --button-bg-color-active: var(--color-background-action-secondary-pressed);
    --button-bg-color-focus: var(--color-background-action-secondary-hover);
    --button-font-color: var(--color-content-action-on);
    --button-font-color-hover: var(--color-content-action-on);
    --button-font-color-active: var(--color-content-action-on);
    --button-font-color-focus: var(--color-content-action-on);
  }
.ButtonNext_variant_contained.ButtonNext_color_tertiary {
    --button-bg-color: var(--color-background-tertiary);
    --button-bg-color-hover: var(--color-background-tertiary-hover);
    --button-bg-color-active: var(--color-background-tertiary-pressed);
    --button-bg-color-focus: var(--color-background-tertiary-hover);
    --button-font-color: var(--color-content-primary);
    --button-font-color-hover: var(--color-content-primary);
    --button-font-color-active: var(--color-content-primary);
    --button-font-color-focus: var(--color-content-primary);
  }
.ButtonNext_variant_contained.ButtonNext_color_error {
    --button-bg-color: var(--color-background-error);
    --button-bg-color-hover: var(--color-background-error-hover);
    --button-bg-color-active: var(--color-background-error-pressed);
    --button-bg-color-focus: var(--color-background-error-hover);
    --button-font-color: var(--color-content-action-on);
    --button-font-color-hover: var(--color-content-action-on);
    --button-font-color-active: var(--color-content-action-on);
    --button-font-color-focus: var(--color-content-action-on);
  }
/** contained-additional */
.ButtonNext_variant_contained-additional.ButtonNext_color_primary {
    --button-bg-color: var(--color-background-action-light);
    --button-bg-color-hover: var(--color-background-action-light-hover);
    --button-bg-color-active: var(--color-background-action-light-pressed);
    --button-bg-color-focus: var(--color-background-action-light-hover);
    --button-font-color: var(--color-content-action);
    --button-font-color-hover: var(--color-content-action);
    --button-font-color-active: var(--color-content-action);
    --button-font-color-focus: var(--color-content-action);
  }
.ButtonNext_variant_contained-additional.ButtonNext_color_secondary {
    --button-bg-color: var(--color-background-secondary);
    --button-bg-color-hover: var(--color-background-secondary-hover);
    --button-bg-color-active: var(--color-background-secondary-pressed);
    --button-bg-color-focus: var(--color-background-secondary-hover);
    --button-font-color: var(--color-content-primary);
    --button-font-color-hover: var(--color-content-primary);
    --button-font-color-active: var(--color-content-primary);
    --button-font-color-focus: var(--color-content-primary);
  }
.ButtonNext_variant_contained-additional.ButtonNext_color_tertiary {
    --button-bg-color: var(--color-background-primary);
    --button-bg-color-hover: var(--color-background-primary-hover);
    --button-bg-color-active: var(--color-background-primary-pressed);
    --button-bg-color-focus: var(--color-background-primary-hover);
    --button-font-color: var(--color-content-secondary);
    --button-font-color-hover: var(--color-content-secondary);
    --button-font-color-active: var(--color-content-secondary);
    --button-font-color-focus: var(--color-content-secondary);
  }
.ButtonNext_variant_contained-additional.ButtonNext_color_error {
    --button-bg-color: var(--color-background-error-light);
    --button-bg-color-hover: var(--color-background-error-light-hover);
    --button-bg-color-active: var(--color-background-error-light-pressed);
    --button-bg-color-focus: var(--color-background-error-light-hover);
    --button-font-color: var(--color-content-error);
    --button-font-color-hover: var(--color-content-error);
    --button-font-color-active: var(--color-content-error);
    --button-font-color-focus: var(--color-content-error);
  }
/** ghost */
.ButtonNext_variant_ghost.ButtonNext_color_primary {
    --button-bg-color: transparent;
    --button-bg-color-hover: var(--color-background-action-light-hover);
    --button-bg-color-active: var(--color-background-action-light-pressed);
    --button-bg-color-focus: var(--color-background-action-light-hover);
    --button-font-color: var(--color-content-action);
    --button-font-color-hover: var(--color-content-action);
    --button-font-color-active: var(--color-content-action);
    --button-font-color-focus: var(--color-content-action);
  }
.ButtonNext_variant_ghost.ButtonNext_color_secondary {
    --button-bg-color: transparent;
    --button-bg-color-hover: var(--color-background-secondary-hover);
    --button-bg-color-active: var(--color-background-secondary-pressed);
    --button-bg-color-focus: var(--color-background-secondary-hover);
    --button-font-color: var(--color-content-primary);
    --button-font-color-hover: var(--color-content-primary);
    --button-font-color-active: var(--color-content-primary);
    --button-font-color-focus: var(--color-content-primary);
  }
.ButtonNext_variant_ghost.ButtonNext_color_tertiary {
    --button-bg-color: transparent;
    --button-bg-color-hover: var(--color-background-primary-hover);
    --button-bg-color-active: var(--color-background-primary-pressed);
    --button-bg-color-focus: var(--color-background-primary-hover);
    --button-font-color: var(--color-content-secondary);
    --button-font-color-hover: var(--color-content-secondary);
    --button-font-color-active: var(--color-content-secondary);
    --button-font-color-focus: var(--color-content-secondary);
  }
.ButtonNext_variant_ghost.ButtonNext_color_error {
    --button-bg-color: transparent;
    --button-bg-color-hover: var(--color-background-error-light-hover);
    --button-bg-color-active: var(--color-background-error-light-pressed);
    --button-bg-color-focus: var(--color-background-error-light-hover);
    --button-font-color: var(--color-content-error);
    --button-font-color-hover: var(--color-content-error);
    --button-font-color-active: var(--color-content-error);
    --button-font-color-focus: var(--color-content-error);
  }
/** function */
.ButtonNext_variant_function {
    --button-height: auto;
    --button-min-width: auto;
    --button-padding-x: 0;
    --button-border-radius: var(--border-radius-xs);
  }
.ButtonNext_variant_function.ButtonNext_color_primary,
  .ButtonNext_variant_function.ButtonNext_color_secondary,
  .ButtonNext_variant_function.ButtonNext_color_tertiary,
  .ButtonNext_variant_function.ButtonNext_color_error {
    --button-bg-color: transparent;
    --button-bg-color-hover: transparent;
    --button-bg-color-active: transparent;
    --button-bg-color-focus: transparent;
  }
.ButtonNext_variant_function.ButtonNext_color_primary {
    --button-font-color: var(--color-content-action);
    --button-font-color-hover: var(--color-background-action-hover);
    --button-font-color-active: var(--color-background-action-pressed);
    --button-font-color-focus: var(--color-background-action-pressed);
  }
.ButtonNext_variant_function.ButtonNext_color_secondary {
    --button-font-color: var(--color-content-action-secondary);
    --button-font-color-hover: var(--color-content-action-secondary-hover);
    --button-font-color-active: var(--color-content-action-secondary-pressed);
    --button-font-color-focus: var(--color-content-action-secondary-pressed);
  }
.ButtonNext_variant_function.ButtonNext_color_tertiary {
    --button-font-color: var(--color-content-secondary);
    --button-font-color-hover: var(--color-content-secondary);
    --button-font-color-active: var(--color-content-secondary);
    --button-font-color-focus: var(--color-content-secondary);
  }
.ButtonNext_variant_function.ButtonNext_color_error {
    --button-font-color: var(--color-content-error);
    --button-font-color-hover: var(--color-content-error-hover);
    --button-font-color-active: var(--color-content-error-pressed);
    --button-font-color-focus: var(--color-content-error-pressed);
  }
/** disabled & loading */
.ButtonNext_variant_contained.ButtonNext_disabled,
  .ButtonNext_variant_contained.ButtonNext_loading,
  .ButtonNext_variant_contained-additional.ButtonNext_disabled,
  .ButtonNext_variant_contained-additional.ButtonNext_loading,
  .ButtonNext_variant_ghost.ButtonNext_disabled,
  .ButtonNext_variant_ghost.ButtonNext_loading,
  .ButtonNext_variant_function.ButtonNext_disabled,
  .ButtonNext_variant_function.ButtonNext_loading {
    --button-font-color: var(--color-content-disabled);
  }
.ButtonNext_variant_contained.ButtonNext_disabled,
  .ButtonNext_variant_contained.ButtonNext_loading,
  .ButtonNext_variant_contained-additional.ButtonNext_disabled,
  .ButtonNext_variant_contained-additional.ButtonNext_loading {
    --button-bg-color: var(--color-background-disabled);
    --button-bg-color-hover: var(--color-background-disabled);
    --button-bg-color-active: var(--color-background-disabled);
  }
.ButtonNext_variant_ghost.ButtonNext_disabled,
  .ButtonNext_variant_ghost.ButtonNext_loading,
  .ButtonNext_variant_function.ButtonNext_disabled,
  .ButtonNext_variant_function.ButtonNext_loading {
    --button-bg-color: transparent;
    --button-bg-color-hover: transparent;
    --button-bg-color-active: transparent;
  }
/** focus */
.ButtonNext:focus:not(:focus-visible, :active, :hover) {
    box-shadow: none;
    color: var(--button-font-color);
    background-color: var(--button-bg-color);
  }
.ButtonNext:focus:not(:focus-visible) {
    box-shadow: none;
  }
.ButtonNext:focus {
    outline: 0;
    box-shadow: var(--shadow-outline-focused);
    background-color: var(--button-bg-color-focus);
    color: var(--button-font-color-focus);
  }
.ButtonNext:hover {
    background-color: var(--button-bg-color-hover);
    color: var(--button-font-color-hover);
  }
.ButtonNext:active {
    background-color: var(--button-bg-color-active);
    color: var(--button-font-color-active);
  }
.ButtonNext_fullWidth {
    inline-size: 100%;
  }
.ButtonNext_disabled,
  .ButtonNext_loading {
    pointer-events: none;
    cursor: auto;
  }
.ButtonNext_loading .ButtonNext-Content {
      visibility: hidden;
    }
.ButtonNext-Content {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    text-align: center;
    place-content: center;
    align-items: center;
    min-inline-size: 0;
    gap: var(--spacing-2xs);
  }
.ButtonNext-Label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.ButtonNext-Loader {
    position: absolute;
  }
.ButtonNext-Loader_animation-enter {
        opacity: 0;
      }
.ButtonNext-Loader_animation-enter-active {
        opacity: 1;
        transition: opacity var(--transition-default);
      }
.ButtonNext-Loader_animation-exit {
        opacity: 1;
      }
.ButtonNext-Loader_animation-exit-active {
        opacity: 0;
        transition: opacity var(--transition-default);
      }
.ButtonNext .Loader {
    color: var(--color-content-disabled);
  }