@ozen-ui/kit/__inner__/cjs/components/Button/Button.css

React component library

/* stylelint-disable */
.Button {
  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;
}
.Button > svg {
    flex-shrink: 0;
  }
.Button_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);
    }
.Button_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);
    }
.Button_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);
    }
.Button_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);
    }
.Button_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);
    }
.Button_variant_contained.Button_color_primary {
    --button-bg-color: var(--color-background-action);
    --button-hover-bg-color: var(--color-background-action-hover);
    --button-active-bg-color: var(--color-background-action-pressed);
    --button-font-color: var(--color-content-action-on);
  }
.Button_variant_contained.Button_color_secondary {
    --button-bg-color: var(--color-background-tertiary);
    --button-hover-bg-color: var(--color-background-tertiary-hover);
    --button-active-bg-color: var(--color-background-tertiary-pressed);
    --button-font-color: var(--color-content-primary);
  }
.Button_variant_contained.Button_color_warning {
    --button-bg-color: var(--color-background-warning);
    --button-hover-bg-color: var(--color-background-warning-hover);
    --button-active-bg-color: var(--color-background-warning-pressed);
    --button-font-color: var(--color-content-action-on);
  }
.Button_variant_contained.Button_color_error {
    --button-bg-color: var(--color-background-error);
    --button-hover-bg-color: var(--color-background-error-hover);
    --button-active-bg-color: var(--color-background-error-pressed);
    --button-font-color: var(--color-content-action-on);
  }
.Button_variant_outlined {
    --button-border-color: var(--color-background-action);
    --button-border-width: 1px;
    padding: 0 calc(var(--button-padding-x) - var(--button-border-width));
    border: var(--button-border-width) solid var(--button-border-color);
  }
.Button_variant_outlined.Button_color_primary {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-action-light-hover);
    --button-active-bg-color: var(--color-background-action-light-pressed);
    --button-font-color: var(--color-content-action);
    --button-border-color: var(--color-border-action);
  }
.Button_variant_outlined.Button_color_secondary {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-primary-hover);
    --button-active-bg-color: var(--color-background-primary-pressed);
    --button-font-color: var(--color-content-primary);
    --button-border-color: var(--color-border-main);
  }
.Button_variant_outlined.Button_color_warning {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-warning-light-hover);
    --button-active-bg-color: var(--color-background-warning-light-pressed);
    --button-font-color: var(--color-content-warning);
    --button-border-color: var(--color-border-warning);
  }
.Button_variant_outlined.Button_color_error {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-error-light-hover);
    --button-active-bg-color: var(--color-background-error-light-pressed);
    --button-font-color: var(--color-content-error);
    --button-border-color: var(--color-border-error);
  }
.Button_variant_ghost.Button_color_primary {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-action-light-hover);
    --button-active-bg-color: var(--color-background-action-light-pressed);
    --button-font-color: var(--color-content-action);
  }
.Button_variant_ghost.Button_color_secondary {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-primary-hover);
    --button-active-bg-color: var(--color-background-primary-pressed);
    --button-font-color: var(--color-content-primary);
  }
.Button_variant_ghost.Button_color_warning {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-warning-light-hover);
    --button-active-bg-color: var(--color-background-warning-light-pressed);
    --button-font-color: var(--color-content-warning);
  }
.Button_variant_ghost.Button_color_error {
    --button-bg-color: unset;
    --button-hover-bg-color: var(--color-background-error-light-hover);
    --button-active-bg-color: var(--color-background-error-light-pressed);
    --button-font-color: var(--color-content-error);
  }
.Button_variant_function {
    --button-height: auto;
    --button-min-width: auto;
    --button-padding-x: 0;
    --button-border-radius: var(--border-radius-xs);
  }
.Button_variant_function:hover {
      opacity: 0.8;
    }
.Button_variant_function:active {
      opacity: 0.6;
    }
.Button_variant_function.Button_color_primary,
  .Button_variant_function.Button_color_secondary,
  .Button_variant_function.Button_color_warning,
  .Button_variant_function.Button_color_error {
    --button-bg-color: unset;
    --button-hover-bg-color: unset;
    --button-active-bg-color: unset;
  }
.Button_variant_function.Button_color_primary {
    --button-font-color: var(--color-content-action);
  }
.Button_variant_function.Button_color_secondary {
    --button-font-color: var(--color-content-primary);
  }
.Button_variant_function.Button_color_warning {
    --button-font-color: var(--color-content-warning);
  }
.Button_variant_function.Button_color_error {
    --button-font-color: var(--color-content-error);
  }
.Button_variant_contained.Button_disabled,
  .Button_variant_contained.Button_loading,
  .Button_variant_outlined.Button_disabled,
  .Button_variant_outlined.Button_loading,
  .Button_variant_ghost.Button_disabled,
  .Button_variant_ghost.Button_loading,
  .Button_variant_function.Button_disabled,
  .Button_variant_function.Button_loading {
    --button-font-color: var(--color-content-disabled);
  }
.Button_variant_contained.Button_disabled,
  .Button_variant_contained.Button_loading {
    --button-bg-color: var(--color-background-disabled);
    --button-hover-bg-color: var(--color-background-disabled);
    --button-active-bg-color: var(--color-background-disabled);
  }
.Button_variant_outlined.Button_disabled,
  .Button_variant_outlined.Button_loading {
    --button-bg-color: unset;
    --button-hover-bg-color: unset;
    --button-active-bg-color: unset;
    --button-border-color: var(--color-border-disabled);
  }
.Button_variant_ghost.Button_disabled,
  .Button_variant_ghost.Button_loading,
  .Button_variant_function.Button_disabled,
  .Button_variant_function.Button_loading {
    --button-bg-color: unset;
    --button-hover-bg-color: unset;
    --button-active-bg-color: unset;
  }
.Button:focus:not(:focus-visible, :active, :hover) {
    box-shadow: none;
  }
.Button:focus:not(:focus-visible) {
    box-shadow: none;
  }
.Button:focus {
    outline: 0;
    box-shadow: var(--shadow-outline-focused);
  }
.Button:hover {
    background-color: var(--button-hover-bg-color);
  }
.Button:active {
    background-color: var(--button-active-bg-color);
  }
.Button_fullWidth {
    inline-size: 100%;
  }
.Button_disabled,
  .Button_loading {
    pointer-events: none;
    cursor: auto;
  }
.Button_loading .Button-Content {
      opacity: 0;
    }
.Button-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);
  }
.Button-Label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.Button-Loader {
    position: absolute;
  }
.Button-Loader_animation-enter {
        opacity: 0;
      }
.Button-Loader_animation-enter-active {
        opacity: 1;
        transition: opacity var(--transition-default);
      }
.Button-Loader_animation-exit {
        opacity: 1;
      }
.Button-Loader_animation-exit-active {
        opacity: 0;
        transition: opacity var(--transition-default);
      }
.Button .Loader {
    color: var(--color-content-disabled);
  }