@layer components {
  :root {
    --twentyone--button--margin: var(--twentyone--spacing--32) 0;
    --twentyone--button--gap: var(--twentyone--spacing--8);
    --twentyone--button--border-radius: var(--twentyone--spacing--8);
    --twentyone--button--border-width: 2px;
    --twentyone--button--padding: var(--twentyone--spacing--8) var(--twentyone--spacing--16);
    --twentyone--button--font-size: var(--twentyone--font-size--level-5);
    --twentyone--button--icon-font-size: var(--twentyone--font-size--level-5);
    --twentyone--button--line-height: 1.5;
    --twentyone--button--letter-spacing: .1em;
    --twentyone--button--text-transform: uppercase;
    --twentyone--button--icon-only-padding: var(--twentyone--spacing--8);
    --twentyone--button--icon-only-font-size: var(--twentyone--font-size--level-5);
    --twentyone--button--icon-only-icon-font-size: var(--twentyone--font-size--level-4);
    --twentyone--button--icon-big-icon-font-size: var(--twentyone--font-size--level-1);
    --twentyone--button--primary-color: var(--twentyone--color--white);
    --twentyone--button--primary-color-hover: var(--twentyone--color--white);
    --twentyone--button--primary-border-color: transparent;
    --twentyone--button--primary-border-color-hover: transparent;
    --twentyone--button--primary-background: var(--twentyone--color--primary);
    --twentyone--button--primary-background-hover: rgba(var(--twentyone--color--primary-rgb), .75);
    --twentyone--button--primary-icon-color: var(--twentyone--color--white);
    --twentyone--button--primary-icon-color-hover: var(--twentyone--color--white);
    --twentyone--button--primary-inverted-color: var(--twentyone--color--black);
    --twentyone--button--primary-inverted-color-hover: var(--twentyone--color--black);
    --twentyone--button--primary-inverted-border-color: transparent;
    --twentyone--button--primary-inverted-border-color-hover: transparent;
    --twentyone--button--primary-inverted-background: var(--twentyone--color--white);
    --twentyone--button--primary-inverted-background-hover: rgba(var(--twentyone--color--white-rgb), .75);
    --twentyone--button--primary-inverted-icon-color: var(--twentyone--color--black);
    --twentyone--button--primary-inverted-icon-color-hover: var(--twentyone--color--black);
    --twentyone--button--secondary-color: var(--twentyone--color--primary);
    --twentyone--button--secondary-color-hover: var(--twentyone--color--primary);
    --twentyone--button--secondary-border-color: transparent;
    --twentyone--button--secondary-border-color-hover: transparent;
    --twentyone--button--secondary-background: rgba(var(--twentyone--color--primary-rgb), .25);
    --twentyone--button--secondary-background-hover: rgba(var(--twentyone--color--primary-rgb), .35);
    --twentyone--button--secondary-icon-color: var(--twentyone--color--primary);
    --twentyone--button--secondary-icon-color-hover: var(--twentyone--color--primary);
    --twentyone--button--secondary-inverted-color: var(--twentyone--color--white);
    --twentyone--button--secondary-inverted-color-hover: var(--twentyone--color--white);
    --twentyone--button--secondary-inverted-border-color: transparent;
    --twentyone--button--secondary-inverted-border-color-hover: transparent;
    --twentyone--button--secondary-inverted-background: rgba(var(--twentyone--color--white-rgb), .25);
    --twentyone--button--secondary-inverted-background-hover: rgba(var(--twentyone--color--white-rgb), .35);
    --twentyone--button--secondary-inverted-icon-color: var(--twentyone--color--white);
    --twentyone--button--secondary-inverted-icon-color-hover: var(--twentyone--color--white);
    --twentyone--button--tertiary-color: var(--twentyone--color--primary);
    --twentyone--button--tertiary-color-hover: rgba(var(--twentyone--color--primary-rgb), .75);
    --twentyone--button--tertiary-border-color: transparent;
    --twentyone--button--tertiary-border-color-hover: transparent;
    --twentyone--button--tertiary-background: transparent;
    --twentyone--button--tertiary-background-hover: transparent;
    --twentyone--button--tertiary-icon-color: var(--twentyone--color--primary);
    --twentyone--button--tertiary-icon-color-hover: rgba(var(--twentyone--color--primary-rgb), .75);
    --twentyone--button--tertiary-inverted-color: var(--twentyone--color--white);
    --twentyone--button--tertiary-inverted-color-hover: rgba(var(--twentyone--color--white-rgb), .75);
    --twentyone--button--tertiary-inverted-border-color: transparent;
    --twentyone--button--tertiary-inverted-border-color-hover: transparent;
    --twentyone--button--tertiary-inverted-background: transparent;
    --twentyone--button--tertiary-inverted-background-hover: transparent;
    --twentyone--button--tertiary-inverted-icon-color: var(--twentyone--color--white);
    --twentyone--button--tertiary-inverted-icon-color-hover: rgba(var(--twentyone--color--white-rgb), .75);
    --twentyone--button--tooltip-icon-only-width: var(--twentyone--spacing--32);
    --twentyone--button--tooltip-icon-only-icon-font-size: var(--twentyone--font-size--level-5);
    --twentyone--button--tooltip-box-shadow: none;
    --twentyone--button--tooltip-border-radius: var(--twentyone--spacing--8);
    --twentyone--button--tooltip-border-width: 2px;
    --twentyone--button--tooltip-border-color: transparent;
    --twentyone--button--tooltip-border-color-hover: transparent;
    --twentyone--button--tooltip-background: var(--twentyone--color--lightgrey);
    --twentyone--button--tooltip-background-hover: var(--twentyone--color--lightgrey);
    --twentyone--button--tooltip-color: var(--twentyone--color--black);
    --twentyone--button--tooltip-color-hover: var(--twentyone--color--black);
    --twentyone--button--tooltip-icon-color: var(--twentyone--color--black);
    --twentyone--button--tooltip-icon-color-hover: var(--twentyone--color--black);
    --twentyone--button--tooltip-inverted-border-color: transparent;
    --twentyone--button--tooltip-inverted-border-color-hover: transparent;
    --twentyone--button--tooltip-inverted-background: rgba(var(--twentyone--color--white-rgb), .25);
    --twentyone--button--tooltip-inverted-background-hover: rgba(var(--twentyone--color--white-rgb), .25);
    --twentyone--button--tooltip-inverted-color: var(--twentyone--color--white);
    --twentyone--button--tooltip-inverted-color-hover: var(--twentyone--color--white);
    --twentyone--button--tooltip-inverted-icon-color: var(--twentyone--color--white);
    --twentyone--button--tooltip-inverted-icon-color-hover: var(--twentyone--color--white);
    --twentyone--button--formular-buttons-gap: var(--twentyone--spacing--12);
    --twentyone--button--formular-border-radius: var(--twentyone--spacing--8);
    --twentyone--button--formular-font-size: var(--twentyone--font-size--level-5);
    --twentyone--button--formular-icon-font-size: var(--twentyone--font-size--level-4);
    --twentyone--button--formular-padding: var(--twentyone--spacing--8) var(--twentyone--spacing--16);
    --twentyone--button--formular-text-transform: none;
    --twentyone--button--formular-letter-spacing: 0;
    --twentyone--button--formular-line-height: 1;
    --twentyone--button--formular-icon-only-font-size: var(--twentyone--font-size--level-5);
    --twentyone--button--formular-icon-only-icon-font-size: var(--twentyone--font-size--level-4);
    --twentyone--button--formular-icon-only-padding: var(--twentyone--spacing--8);
    --twentyone--button--formular-color: var(--twentyone--color--black);
    --twentyone--button--formular-color-hover: var(--twentyone--color--black);
    --twentyone--button--formular-color-active: var(--twentyone--color--white);
    --twentyone--button--formular-icon-color: var(--twentyone--color--black);
    --twentyone--button--formular-icon-color-hover: var(--twentyone--color--black);
    --twentyone--button--formular-icon-color-active: var(--twentyone--color--primary);
    --twentyone--button--formular-background: var(--twentyone--color--lightgrey);
    --twentyone--button--formular-background-hover: rgba(var(--twentyone--color--primary-rgb), .1);
    --twentyone--button--formular-background-active: var(--twentyone--color--primary);
    --twentyone--button--formular-border-color: transparent;
    --twentyone--button--formular-border-color-hover: transparent;
    --twentyone--button--formular-border-color-active: transparent;
    --twentyone--button--formular-inverted-color: var(--twentyone--color--white);
    --twentyone--button--formular-inverted-color-hover: var(--twentyone--color--white);
    --twentyone--button--formular-inverted-color-active: var(--twentyone--color--black);
    --twentyone--button--formular-inverted-icon-color: var(--twentyone--color--white);
    --twentyone--button--formular-inverted-icon-color-hover: var(--twentyone--color--white);
    --twentyone--button--formular-inverted-icon-color-active: var(--twentyone--color--primary);
    --twentyone--button--formular-inverted-background: rgba(var(--twentyone--color--white-rgb), .25);
    --twentyone--button--formular-inverted-background-hover: rgba(var(--twentyone--color--white-rgb), .5);
    --twentyone--button--formular-inverted-background-active: var(--twentyone--color--white);
    --twentyone--button--formular-inverted-border-color: transparent;
    --twentyone--button--formular-inverted-border-color-hover: transparent;
    --twentyone--button--formular-inverted-border-color-active: transparent;
    --twentyone--button--modal-color: var(--twentyone--color--grey);
    --twentyone--button--modal-color-hover: var(--twentyone--color--grey);
    --twentyone--button--modal-icon-color: var(--twentyone--color--black);
    --twentyone--button--modal-icon-color-hover: var(--twentyone--color--black);
    --twentyone--button--modal-background: var(--twentyone--color--lightgrey);
    --twentyone--button--modal-background-hover: var(--twentyone--color--white);
    --twentyone--button--modal-border-color: transparent;
    --twentyone--button--modal-border-color-hover: transparent;
    --twentyone--button--modal-box-shadow: none;
    --twentyone--button--modal-top-right: var(--twentyone--spacing--20);
    --twentyone--button--aside-toggle-padding: var(--twentyone--spacing--8) var(--twentyone--spacing--16);
    --twentyone--button--aside-toggle-border-radius: var(--twentyone--spacing--8);
    --twentyone--button--aside-toggle-text-font-size: var(--twentyone--font-size--level-7);
    --twentyone--button--aside-toggle-icon-font-size: var(--twentyone--font-size--level-7);
    --twentyone--button--aside-toggle-icon-color: var(--twentyone--color--grey);
    --twentyone--button--aside-toggle-border-width: 4px;
    --twentyone--button--aside-toggle-border-color: var(--twentyone--color--lightgrey);
    --twentyone--button--aside-toggle-background: var(--twentyone--color--white);
    --twentyone--button--icon-only-aside-toggle-width: var(--twentyone--spacing--32);
    --twentyone--button--icon-only-aside-toggle-icon-font-size: var(--twentyone--font-size--level-7);
  }
  .twentyone-button {
    cursor: pointer;
    border-width: var(--twentyone--button--border-width);
    border-style: solid;
    border-color: var(--twentyone--button--primary-border-color);
    color: var(--twentyone--button--primary-color);
    fill: var(--twentyone--button--primary-icon-color);
    background: var(--twentyone--button--primary-background);
    display: flex;
    align-items: center;
    font-size: 1em;
    gap: var(--twentyone--button--gap);
    justify-content: center;
    margin: var(--twentyone--button--margin);
    padding: var(--twentyone--button--padding);
    position: relative;
    text-align: center;
    text-decoration: none !important;
    text-transform: var(--twentyone--button--text-transform);
    touch-action: manipulation;
    z-index: 1;
    appearance: none;
    border-radius: var(--twentyone--button--border-radius);
    transition: var(--twentyone--element--transition);
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-user-select: none;
    user-select: none;
  }
  .twentyone-button:first-child {
    margin-top: 0;
  }
  .twentyone-button:last-child {
    margin-bottom: 0;
  }
  @media (hover: hover) {
    .twentyone-button:hover {
      background: var(--twentyone--button--primary-background-hover);
      border-color: var(--twentyone--button--primary-border-color-hover);
      color: var(--twentyone--button--primary-color-hover);
      fill: var(--twentyone--button--primary-icon-color-hover);
    }
  }
  @media (hover: none) and (pointer: coarse) {
    .twentyone-button:active {
      scale: 0.95;
    }
  }
  .twentyone-button .twentyone-label {
    color: inherit;
    display: block;
    font-family: var(--twentyone--font-family--system);
    font-size: var(--twentyone--button--font-size);
    font-weight: bold;
    letter-spacing: var(--twentyone--button--letter-spacing);
    line-height: var(--twentyone--button--line-height);
    text-align: center;
    text-transform: var(--twentyone--button--text-transform);
    z-index: 6;
    transition: var(--twentyone--element--transition);
  }
  .twentyone-button .twentyone-label strong,
  .twentyone-button .twentyone-label em,
  .twentyone-button .twentyone-label i {
    color: inherit;
  }
  .twentyone-button .twentyone-icon svg,
  .twentyone-button .twentyone-icon img {
    font-size: var(--twentyone--button--icon-font-size);
  }
  .twentyone-button.icon--only {
    aspect-ratio: 1/1;
    flex: 0 0 auto;
    padding: var(--twentyone--button--icon-only-padding);
  }
  .twentyone-button.icon--only .twentyone-icon svg,
  .twentyone-button.icon--only .twentyone-icon img {
    font-size: var(--twentyone--button--icon-only-icon-font-size);
  }
  .twentyone-button.icon--only .twentyone-label {
    font-size: var(--twentyone--button--icon-only-font-size);
  }
  .twentyone-button.icon--big .twentyone-icon svg,
  .twentyone-button.icon--big .twentyone-icon img {
    font-size: var(--twentyone--button--icon-big-icon-font-size);
  }
  .twentyone-button.is--close {
    margin: 0;
    z-index: 9999;
    position: absolute;
    right: var(--twentyone--button--modal-top-right);
    top: var(--twentyone--button--modal-top-right);
    background: var(--twentyone--button--modal-background);
    border-color: var(--twentyone--button--modal-border-color);
    color: var(--twentyone--button--modal-color);
    fill: var(--twentyone--button--modal-icon-color);
    box-shadow: var(--twentyone--button--modal-box-shadow);
  }
  @media (hover: hover) {
    .twentyone-button.is--close:hover {
      background: var(--twentyone--button--modal-background-hover);
      border-color: var(--twentyone--button--modal-border-color-hover);
      color: var(--twentyone--button--modal-color-hover);
      fill: var(--twentyone--button--modal-icon-color-hover);
    }
  }
  .twentyone-button.is--close + * {
    margin-top: 0 !important;
  }
  .twentyone-button.is--formular {
    background: var(--twentyone--button--formular-background);
    border-color: var(--twentyone--button--formular-border-color);
    color: var(--twentyone--button--formular-color);
    fill: var(--twentyone--button--formular-icon-color);
    font-family: var(--twentyone--font-family--system);
    font-style: normal;
    font-weight: normal;
    padding: var(--twentyone--button--formular-padding);
    border-radius: var(--twentyone--button--formular-border-radius);
  }
  .twentyone-button.is--formular .twentyone-label {
    font-size: var(--twentyone--button--formular-font-size);
    font-weight: normal;
    letter-spacing: var(--twentyone--button--formular-letter-spacing);
    line-height: var(--twentyone--button--formular-line-height);
    text-transform: var(--twentyone--button--formular-text-transform);
  }
  .twentyone-button.is--formular .twentyone-icon svg,
  .twentyone-button.is--formular .twentyone-icon img {
    font-size: var(--twentyone--button--formular-icon-font-size);
  }
  @media (hover: hover) {
    .twentyone-button.is--formular:hover {
      background: var(--twentyone--button--formular-background-hover);
      border-color: var(--twentyone--button--formular-border-color-hover);
      color: var(--twentyone--button--formular-color-hover);
      fill: var(--twentyone--button--formular-icon-color-hover);
    }
  }
  .twentyone-button.is--formular input:checked ~ .twentyone-button {
    background: var(--twentyone--button--formular-background-active);
    border-color: var(--twentyone--button--formular-border-color-active);
    color: var(--twentyone--button--formular-color-active);
    fill: var(--twentyone--button--formular-icon-color-active);
  }
  .twentyone-button.is--formular.icon--only {
    padding: var(--twentyone--button--formular-icon-only-padding);
  }
  .twentyone-button.is--formular.icon--only .twentyone-label {
    font-size: var(--twentyone--button--formular-icon-only-font-size);
  }
  .twentyone-button.is--formular.icon--only .twentyone-icon svg,
  .twentyone-button.is--formular.icon--only .twentyone-icon img {
    font-size: var(--twentyone--button--formular-icon-only-icon-font-size);
  }
  .twentyone-button.is--formular.is--inverted {
    background: var(--twentyone--button--formular-inverted-background);
    border-color: var(--twentyone--button--formular-inverted-border-color);
    color: var(--twentyone--button--formular-inverted-color);
    fill: var(--twentyone--button--formular-inverted-icon-color);
  }
  @media (hover: hover) {
    .twentyone-button.is--formular.is--inverted:hover {
      background: var(--twentyone--button--formular-inverted-background-hover);
      border-color: var(--twentyone--button--formular-inverted-border-color-hover);
      color: var(--twentyone--button--formular-inverted-color-hover);
      fill: var(--twentyone--button--formular-inverted-icon-color-hover);
    }
  }
  .twentyone-button.is--formular.is--inverted input:checked ~ .twentyone-button {
    background: var(--twentyone--button--formular-inverted-background-active);
    border-color: var(--twentyone--button--formular-inverted-border-color-active);
    color: var(--twentyone--button--formular-inverted-color-active);
    fill: var(--twentyone--button--formular-inverted-icon-color-active);
  }
  .twentyone-button.is--inverted {
    background: var(--twentyone--button--primary-inverted-background);
    border-color: var(--twentyone--button--primary-inverted-border-color);
    color: var(--twentyone--button--primary-inverted-color);
    fill: var(--twentyone--button--primary-inverted-icon-color);
  }
  @media (hover: hover) {
    .twentyone-button.is--inverted:hover {
      background: var(--twentyone--button--primary-inverted-background-hover);
      border-color: var(--twentyone--button--primary-inverted-border-color-hover);
      color: var(--twentyone--button--primary-inverted-color-hover);
      fill: var(--twentyone--button--primary-inverted-icon-color-hover);
    }
  }
  .twentyone-button.is--secondary {
    background: var(--twentyone--button--secondary-background);
    border-color: var(--twentyone--button--secondary-border-color);
    color: var(--twentyone--button--secondary-color);
    fill: var(--twentyone--button--secondary-icon-color);
  }
  @media (hover: hover) {
    .twentyone-button.is--secondary:hover {
      background: var(--twentyone--button--secondary-background-hover);
      border-color: var(--twentyone--button--secondary-border-color-hover);
      color: var(--twentyone--button--secondary-color-hover);
      fill: var(--twentyone--button--secondary-icon-color-hover);
    }
  }
  .twentyone-button.is--secondary.is--inverted {
    background: var(--twentyone--button--secondary-inverted-background);
    border-color: var(--twentyone--button--secondary-inverted-border-color);
    color: var(--twentyone--button--secondary-inverted-color);
    fill: var(--twentyone--button--secondary-inverted-icon-color);
  }
  @media (hover: hover) {
    .twentyone-button.is--secondary.is--inverted:hover {
      background: var(--twentyone--button--secondary-inverted-background-hover);
      border-color: var(--twentyone--button--secondary-inverted-border-color-hover);
      color: var(--twentyone--button--secondary-inverted-color-hover);
      fill: var(--twentyone--button--secondary-inverted-icon-color-hover);
    }
  }
  .twentyone-button.is--tertiary {
    background: var(--twentyone--button--tertiary-background);
    border-color: var(--twentyone--button--tertiary-border-color);
    color: var(--twentyone--button--tertiary-color);
    fill: var(--twentyone--button--tertiary-icon-color);
    padding: 0;
    border-radius: 0;
  }
  @media (hover: hover) {
    .twentyone-button.is--tertiary:hover {
      background: var(--twentyone--button--tertiary-background-hover);
      border-color: var(--twentyone--button--tertiary-border-color-hover);
      color: var(--twentyone--button--tertiary-color-hover);
      fill: var(--twentyone--button--tertiary-icon-color-hover);
    }
  }
  .twentyone-button.is--tertiary.is--inverted {
    background: var(--twentyone--button--tertiary-inverted-background);
    border-color: var(--twentyone--button--tertiary-inverted-border-color);
    color: var(--twentyone--button--tertiary-inverted-color);
    fill: var(--twentyone--button--tertiary-inverted-icon-color);
  }
  @media (hover: hover) {
    .twentyone-button.is--tertiary.is--inverted:hover {
      background: var(--twentyone--button--tertiary-inverted-background-hover);
      border-color: var(--twentyone--button--tertiary-inverted-border-color-hover);
      color: var(--twentyone--button--tertiary-inverted-color-hover);
      fill: var(--twentyone--button--tertiary-inverted-icon-color-hover);
    }
  }
  .twentyone-button.is--tooltip {
    background: var(--twentyone--button--tooltip-background);
    border-color: var(--twentyone--button--tooltip-border-color);
    border-width: var(--twentyone--button--tooltip-border-width);
    color: var(--twentyone--button--tooltip-color);
    fill: var(--twentyone--button--tooltip-icon-color);
    box-shadow: var(--twentyone--button--tooltip-box-shadow);
    border-radius: var(--twentyone--button--tooltip-border-radius);
  }
  @media (hover: hover) {
    .twentyone-button.is--tooltip:hover {
      background: var(--twentyone--button--tooltip-background-hover);
      border-color: var(--twentyone--button--tooltip-border-color-hover);
      color: var(--twentyone--button--tooltip-color-hover);
      fill: var(--twentyone--button--tooltip-icon-color-hover);
    }
  }
  .twentyone-button.is--tooltip.icon--only {
    width: var(--twentyone--button--tooltip-icon-only-button-width);
  }
  .twentyone-button.is--tooltip.icon--only .twentyone-icon svg,
  .twentyone-button.is--tooltip.icon--only .twentyone-icon img {
    font-size: var(--twentyone--button--tooltip-icon-only-button-icon-font-size);
  }
  .twentyone-button.is--tooltip.is--inverted {
    background: var(--twentyone--button--tooltip-inverted-background);
    border-color: var(--twentyone--button--tooltip-inverted-border-color);
    color: var(--twentyone--button--tooltip-inverted-color);
    fill: var(--twentyone--button--tooltip-inverted-icon-color);
  }
  @media (hover: hover) {
    .twentyone-button.is--tooltip.is--inverted:hover {
      background: var(--twentyone--button--tooltip-inverted-background-hover);
      border-color: var(--twentyone--button--tooltip-inverted-border-color-hover);
      color: var(--twentyone--button--tooltip-inverted-color-hover);
      fill: var(--twentyone--button--tooltip-inverted-icon-color-hover);
    }
  }
  .twentyone-button.is--toggle {
    background: var(--twentyone--button--aside-toggle-background);
    border-color: var(--twentyone--button--aside-toggle-border-color);
    border-width: var(--twentyone--button--aside-toggle-border-width);
    fill: var(--twentyone--button--aside-toggle-icon-color);
    padding: var(--twentyone--button--aside-toggle-padding);
    border-radius: var(--twentyone--button--aside-toggle-border-radius);
  }
  .twentyone-button.is--toggle .twentyone-label {
    font-size: var(--twentyone--button--aside-toggle-text-font-size);
  }
  .twentyone-button.is--toggle .twentyone-icon svg,
  .twentyone-button.is--toggle .twentyone-icon img {
    font-size: var(--twentyone--button--aside-toggle-icon-font-size);
  }
  .twentyone-button.is--toggle.icon--only {
    width: var(--twentyone--button--icon-only-aside-toggle-width);
  }
  .twentyone-button.is--toggle.icon--only .twentyone-icon svg,
  .twentyone-button.is--toggle.icon--only .twentyone-icon img {
    font-size: var(--twentyone--button--icon-only-aside-toggle-icon-font-size);
  }
  .twentyone-button.is--toggle.is--active .twentyone-icon svg,
  .twentyone-button.is--toggle.is--active .twentyone-icon img {
    rotate: 180deg;
  }
  .twentyone-buttons .twentyone-button.width--custom {
    width: auto;
    flex: 0 1 calc(var(--width, 50%) - var(--twentyone--button--gap));
  }
  .twentyone-buttons.twentyone-grid.is--admin > li > .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block {
    width: auto;
    flex: 0 1 calc(var(--width, auto) - var(--twentyone--button--gap));
  }
}