/* the lz-cta styles */
@layer components {
  @scope (lz-cta) {
    :scope {
      text-align: center;

      a[href] {
        --_bg-color: var(--primary);
        --_bg-color-hover: var(--primary-1);

        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-block: var(--size-2);
        padding-inline: var(--size-3);
        font-family: var(--font-system-ui);
        font-weight: var(--font-weight-6);
        color: white;
        text-decoration: none;
        background-color: var(--_bg-color);
        background-image: linear-gradient(
          to bottom,
          transparent,
          var(--_bg-color-hover)
        );
        border-radius: var(--radius-2);
        transition-timing-function: ease-in-out;
        transition-duration: var(--transition-duration);
        transition-property: background-color, outline;

        &:where(:focus-visible, :active) {
          color: white;
          background-color: var(--_bg-color-hover);
        }

        @media (hover: hover) {
          &:hover {
            color: white;
            background-color: var(--_bg-color-hover);
          }
        }
      }
    }
  }
}