@layer atoms {
  .btn-dark-hollow, .btn-dark, .btn-hollow, .btn {
    --font-size-button: var(--font-size-default);
    --border-radius-button: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-button-t-b) var(--padding-button-l-r);
    border-radius: var(--border-radius-button);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    text-align: center;
    -webkit-user-select: none;
            user-select: none;
    cursor: pointer;
    transition: all var(--motion-base) var(--motion-ease);
  }
  .btn-dark-hollow:focus-visible, .btn-dark:focus-visible, .btn-hollow:focus-visible, .btn:focus-visible {
    outline: var(--border-default-width) solid var(--color-primary-orange);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .btn-dark-hollow:active:not(:disabled, .disabled), .btn-dark:active:not(:disabled, .disabled), .btn-hollow:active:not(:disabled, .disabled), .btn:active:not(:disabled, .disabled) {
      transform: scale(0.98);
    }
  }
  .btn-dark-hollow:disabled, .btn-dark:disabled, .btn-hollow:disabled, .btn:disabled, .disabled.btn-dark-hollow, .disabled.btn-dark, .disabled.btn-hollow, .disabled.btn {
    cursor: not-allowed;
  }
  .btn-dark-hollow:hover, .btn-dark:hover, .btn-hollow:hover, .btn:hover, .btn-dark-hollow:focus, .btn-dark:focus, .btn-hollow:focus, .btn:focus {
    opacity: 1;
  }
  .btn {
    border: none;
    background-color: var(--color-primary-orange);
    color: var(--shade-white);
  }
  .btn:hover:not(.btn-hollow, .btn-dark, .btn-dark-hollow) {
    background-color: #d64102;
  }
  .btn:active:not(.btn-hollow, .btn-dark, .btn-dark-hollow) {
    background-color: #b03502;
  }
  .btn:is(:disabled, .disabled):not(.btn-hollow, .btn-dark, .btn-dark-hollow) {
    background-color: var(--shade-grey-250);
  }
  .btn-hollow {
    border: var(--border-default-width) solid var(--color-primary-orange);
    background-color: transparent;
    color: var(--color-primary-orange);
  }
  .btn-hollow:hover {
    border-color: #d64102;
    color: #d64102;
  }
  .btn-hollow:active {
    border-color: #b03502;
    color: #b03502;
  }
  .btn-hollow:disabled, .btn-hollow.disabled {
    border-color: var(--shade-grey-250);
    color: var(--shade-grey-250);
  }
  .btn-dark {
    border: var(--border-default-width) solid var(--color-primary-anthracite);
    background-color: var(--color-primary-anthracite);
    color: var(--shade-white);
  }
  .btn-dark:hover {
    border-color: var(--shade-black);
    background-color: var(--shade-black);
  }
  .btn-dark:disabled, .btn-dark.disabled {
    border-color: var(--shade-grey-250);
    background-color: var(--shade-grey-250);
  }
  .btn-dark-hollow {
    border: var(--border-default-width) solid var(--color-primary-anthracite);
    background-color: transparent;
    color: var(--color-primary-anthracite);
  }
  .btn-dark-hollow:hover {
    border-color: var(--color-primary-anthracite);
    background-color: var(--color-primary-anthracite);
    color: var(--shade-white);
  }
  .btn-dark-hollow:disabled, .btn-dark-hollow.disabled {
    border-color: var(--shade-grey-250);
    color: var(--shade-grey-250);
  }
  p:has(> :is(.btn, .btn-hollow, .btn-dark, .btn-dark-hollow)) {
    margin-bottom: calc(1.5em - var(--gap-s));
  }
  p:has(> :is(.btn, .btn-hollow, .btn-dark, .btn-dark-hollow)) > :is(.btn, .btn-hollow, .btn-dark, .btn-dark-hollow) {
    margin-bottom: var(--gap-s);
  }
}