/**
Sizes
 */
/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
/**
Generic buttons style
 */
:host {
  --button-font-family: var(--joy-font-family-base);
  --button-bgcolor-disabled: var(--joy-color-neutral-30);
  --button-color-disabled: var(--joy-color-neutral-40);
  --button-border-color-disabled: var(--joy-color-neutral-30);
  --button-icon-color-disabled: var(--joy-color-neutral-40);
  display: inline-flex;
}

.joy-button {
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: var(--button-font-family);
  line-height: 1;
  z-index: 1;
  border: none;
  transition: all var(--joy-transition-duration-default);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  outline: none;
  opacity: 1;
  width: 100%;
  background-color: var(--button-bgcolor);
  color: var(--button-color, white);
  border: 2px solid var(--button-bdcolor, transparent);
  overflow: hidden;
}
@keyframes joyCoreRipple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
.joy-button .joy-ripple-effect {
  display: block;
  position: absolute;
  border-radius: 50%;
  animation: joyCoreRipple 0.6s linear;
  background-color: var(--ripple-background, white);
  opacity: 0.3;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  margin: 0;
  padding: 0;
}
.joy-button:hover {
  color: var(--button-color-hover, var(--button-color, white));
  background-color: var(--button-bgcolor-hover, var(--button-bgcolor));
  border-color: var(--button-bdcolor-hover, var(--button-bgcolor-hover, --button-bgcolor));
}
.joy-button:active {
  color: var(--button-color-focus, var(--button-color-hover, var(--button-color, white)));
  background-color: var(--button-bgcolor-focus, var(--button-bgcolor-hover, var(--button-bgcolor)));
  border-color: var(--button-bdcolor-focus, var(--button-bgcolor-focus, var(--button-bgcolor-hover, var(--button-bgcolor))));
}
.joy-button .joy-button_icon {
  color: inherit;
}
.joy-button .joy-button_icon--left {
  margin-right: var(--joy-core-spacing-2);
}
.joy-button .joy-button_icon--right {
  margin-left: var(--joy-core-spacing-2);
}
.joy-button:focus {
  box-shadow: inset 0 0 0 2px white;
  border-color: var(--button-bdcolor-focus, var(--joy-form-field-focus-color));
}
.joy-button * {
  pointer-events: none;
}
.joy-button.disabled, .joy-button:disabled, .joy-button[disabled]:hover {
  cursor: not-allowed;
  background-color: var(--button-bgcolor-disabled);
  color: var(--button-color-disabled);
  border-color: var(--button-border-color-disabled);
  cursor: not-allowed;
}
.joy-button.disabled joy-icon, .joy-button:disabled joy-icon, .joy-button[disabled]:hover joy-icon {
  color: var(--button-icon-color-disabled);
}
.joy-button joy-spinner {
  position: absolute;
  margin: auto;
}
.joy-button.joy-button_circle {
  padding: 0;
  min-width: auto;
  border-radius: var(--joy-core-radius-6);
}
.joy-button.joy-button_circle joy-icon {
  margin: 0;
}
.joy-button.joy-button_circle .joy-button--slot {
  display: none;
}
.joy-button.joy-button_loading:disabled {
  cursor: not-allowed;
  color: transparent;
}
.joy-button.joy-button_loading:disabled:hover {
  color: transparent;
}
.joy-button.joy-button_loading:disabled joy-icon {
  color: transparent;
}

.joy-button_main {
  --button-bgcolor: var(--joy-color-primary-50);
  --button-bdcolor: var(--button-bgcolor);
  --button-bgcolor-hover: var(--joy-color-primary-70);
  --button-bgcolor-focus: var(--joy-color-primary-90);
}

.joy-button_primary {
  --button-bgcolor: var(--joy-color-secondary-30);
  --button-bdcolor: var(--button-bgcolor);
  --button-bdcolor-focus: var(--joy-form-field-focus-color);
  --button-bgcolor-hover: var(--joy-color-secondary-50);
  --button-bgcolor-focus: var(--joy-color-secondary-90);
}

.joy-button_secondary {
  --ripple-background: var(--joy-color-neutral-50);
  --button-color: var(--joy-color-secondary-50);
  --button-bgcolor: transparent;
  --button-bdcolor: var(--button-color);
  --button-bdcolor-hover: var(--button-color);
  --button-bgcolor-hover: var(--joy-color-secondary-10);
}
.joy-button_secondary.disabled, .joy-button_secondary:disabled, .joy-button_secondary[disabled]:hover {
  cursor: not-allowed;
  --button-color: var(--joy-color-neutral-40);
  --button-bordercolor: var(--joy-color-neutral-30);
  --button-bgcolor: white;
}

.joy-button_white {
  --ripple-background: var(--joy-color-neutral-50);
  --button-color: var(--joy-color-secondary-50);
  --button-color-focus: var(--joy-color-secondary-90);
  --button-bgcolor: white;
  --button-bgcolor-hover: var(--joy-color-neutral-20);
  --button-icon-color-white-hover: var(--joy-color-secondary-90);
}
.joy-button_white:not(:disabled):hover joy-icon {
  color: var(--button-icon-color-white-hover);
}

.joy-button_ghost {
  --ripple-background: var(--joy-color-neutral-40);
  --button-color: var(--joy-color-secondary-50);
  --button-color-hover: var(--joy-color-secondary-50);
  --button-bgcolor: transparent;
  --button-bgcolor-hover: var(--joy-color-neutral-20);
}
.joy-button_ghost:not(:disabled):hover joy-icon {
  color: var(--button-color);
}
.joy-button_ghost:disabled, .joy-button_ghost:disabled:hover {
  --button-color: transparent;
}

.joy-button_admin {
  --button-bgcolor: var(--joy-color-quaternary-50);
  --button-bgcolor-hover: var(--joy-color-quaternary-70);
  --button-bgcolor-focus: var(--joy-color-quaternary-100);
  --button-bdcolor: var(--button-bgcolor);
  --button-color: var(--joy-color-neutral-60);
}

.joy-button_xxsmall {
  min-height: var(--joy-form-field-height-xxsmall);
  padding: var(--button-padding, var(--joy-core-spacing-2) var(--joy-core-spacing-4));
  font-size: var(--button-font-size, var(--joy-font-size-primary-100));
  border-radius: var(--button-border-radius, var(--joy-form-field-radius-xxsmall));
}
.joy-button_xxsmall joy-spinner {
  --spinner-size: 12px;
}
.joy-button_xxsmall:after {
  border-radius: calc(var(--joy-form-field-radius-xxsmall) + 2px);
}
.joy-button_xxsmall.joy-button_circle {
  width: var(--joy-form-field-height-xxsmall);
}

.joy-button_xsmall {
  min-height: var(--joy-form-field-height-xsmall);
  padding: var(--button-padding, var(--joy-core-spacing-2) var(--joy-core-spacing-4));
  font-size: var(--button-font-size, var(--joy-font-size-primary-200));
  border-radius: var(--button-border-radius, var(--joy-form-field-radius-xsmall));
}
.joy-button_xsmall joy-spinner {
  --spinner-size: 16px;
}
.joy-button_xsmall:after {
  border-radius: calc(var(--joy-form-field-radius-xsmall) + 2px);
}
.joy-button_xsmall.joy-button_circle {
  width: var(--joy-form-field-height-xsmall);
}

.joy-button_small {
  min-height: var(--joy-form-field-height-small);
  padding: var(--button-padding, var(--joy-core-spacing-3) var(--joy-core-spacing-9));
  font-size: var(--button-font-size, var(--joy-font-size-primary-300));
  border-radius: var(--button-border-radius, var(--joy-form-field-radius-small));
}
.joy-button_small joy-spinner {
  --spinner-size: 20px;
}
.joy-button_small:after {
  border-radius: calc(var(--joy-form-field-radius-small) + 2px);
}
.joy-button_small.joy-button_circle {
  width: var(--joy-form-field-height-small);
}

.joy-button_medium {
  min-height: var(--joy-form-field-height-medium);
  padding: var(--button-padding, var(--joy-core-spacing-3) var(--joy-core-spacing-9));
  font-size: var(--button-font-size, var(--joy-font-size-primary-400));
  border-radius: var(--button-border-radius, var(--joy-form-field-radius-medium));
}
.joy-button_medium:after {
  border-radius: calc(var(--joy-form-field-radius-medium) + 2px);
}
.joy-button_medium.joy-button_circle {
  width: var(--joy-form-field-height-medium);
}

.joy-button_large {
  min-height: var(--joy-form-field-height-large);
  padding: var(--button-padding, var(--joy-core-spacing-4) var(--joy-core-spacing-9));
  font-size: var(--button-font-size, var(--joy-font-size-primary-600));
  border-radius: var(--button-border-radius, var(--joy-form-field-radius-large));
  min-width: calc(var(--joy-core-spacing-base) * 40);
}
.joy-button_large:after {
  border-radius: calc(var(--joy-form-field-radius-large) + 2px);
}
.joy-button_large.joy-button_circle {
  width: var(--joy-form-field-height-large);
}