CWC/styles/blocks/buttons.css

/* Button styles */

@theme static {
    /* Configuration */

    /**
     * Button component settings
     *
     * The variables below are used to define the button styles.
     * Most of these variables come from the main theme configuration.
     * The following variables are not defined, but have fallback values
     * in their respective locations and can be added if needed:
     *
     * --button-font-weight   (fallback is 600/semibold)
     * --button-font-size     (fallback is 1rem)
     * --button-outline-width (fallback is --button-border-width)
     * --button-outline-style (fallback is --button-border-style)
     * --button-outline-color (fallback is --button-border-color)
     */

    --button-primary-bg:                  var(--background-image-button-gradient);
    --button-primary-color:               var(--color-white);
    --button-primary-border-color:        var(--color-secondary);
    --button-primary-hover-bg:            var(--color-secondary);
    --button-primary-hover-border-color:  var(--color-secondary);
    --button-primary-hover-color:         var(--color-white);
    --button-primary-active-bg:           color-mix(in oklch, var(--color-secondary) 84%, var(--color-danger));
    --button-primary-active-border-color: color-mix(in oklch, var(--color-secondary) 84%, var(--color-danger));
    --button-primary-outline-hover-color: var(--color-white);
    --button-primary-shadow-color:        color-mix(in oklch, var(--color-secondary) 72%, var(--color-danger));
    --button-primary-hover-shadow:        0.25rem 0.25rem 0 var(--button-primary-shadow-color);
    --button-primary-active-shadow:       none;
    --button-primary-radius:              1.25rem 0.25rem 1.25rem 0.25rem;

    --button-bg:                  var(--button-primary-bg);
    --button-color:               var(--button-primary-color);
    --button-hover-bg:            var(--button-primary-hover-bg);
    --button-hover-border-color:  var(--button-primary-hover-border-color);
    --button-hover-color:         var(--button-primary-hover-color);
    --button-active-bg:           var(--button-primary-active-bg);
    --button-active-border-color: var(--button-primary-active-border-color);
    --button-shadow:              none;
    --button-hover-shadow:        var(--button-primary-hover-shadow);
    --button-active-shadow:       var(--button-primary-active-shadow);
    --button-border-width:        3px;
    --button-border-style:        solid;
    --button-border-color:        var(--button-primary-border-color);
    --button-radius:              var(--button-primary-radius);
    --button-padding-block:       0.625rem;
    --button-padding-inline:      2rem;
    --button-font-size:           var(--text-18px);
    --button-font-weight:         700;
    --button-letter-spacing:      0;
}

.btn, .button, .acf-block-preview .button {
    @apply min-w-0;

    background: var(--button-bg);
    box-shadow: var(--button-shadow);
    cursor:     pointer;
    display:    inline-block;
    transition: background 200ms, border-color 200ms, box-shadow 200ms, color 200ms, transform 200ms;

    color:      var(--button-color);

    &.dark { color: white; }

    border-width:  var(--button-border-width);
    border-style:  var(--button-border-style);
    border-color:  var(--button-border-color);
    border-radius: var(--button-radius);

    padding: var(--button-padding-block) var(--button-padding-inline);

    text-decoration: none;
    font-weight:     var(--button-font-weight, 600);
    font-size:       var(--button-font-size, 1rem);
    letter-spacing:  var(--button-letter-spacing);
    line-height:     1.1;

    &[data-button-variant="outline"] {
        background: transparent;

        &:hover {
            background: var(--button-border-color);
        }

        --button-color:              var(--button-border-color);
        --button-hover-border-color: var(--button-border-color);
        --button-hover-color:        var(--button-primary-outline-hover-color);
    }
}

/* Hover/focus/active */
.btn:hover, .button:hover, .acf-block-preview .button:hover {
    background:   var(--button-hover-bg);
    border-color: var(--button-hover-border-color);
    box-shadow:   var(--button-hover-shadow);
    color:        var(--button-hover-color);
}

.btn:focus, .button:focus {
    outline-width:  var(--button-outline-width, var(--button-border-width));
    outline-style:  var(--button-outline-style, var(--button-border-style));
    outline-color:  var(--button-outline-color, var(--button-border-color));
    outline-offset: calc(var(--button-border-width) * 2);
}

.btn:active, .button:active {
    background:   var(--button-active-bg);
    border-color: var(--button-active-border-color);
    box-shadow:   var(--button-active-shadow);
    transform:    translate(0.125rem, 0.125rem);
}

/**
 * Variants
 *
 * The following styles are used to define button variants.
 * These styles are applied to the button element using the
 * `data-button-*` attributes.
 */

/* Sizes */
.btn[data-button-size="small"], .button[data-button-size="small"]  { @apply px-4 py-0.5; }
.btn[data-button-size="medium"], .button[data-button-size="medium"] { @apply px-8 py-2; }
.btn[data-button-size="large"], .button[data-button-size="large"]  { @apply px-12 py-3; }

/* Width */
.btn[data-button-width="auto"], .button[data-button-width="auto"]  { @apply min-w-0; }
.btn[data-button-width="small"], .button[data-button-width="small"] { @apply px-2; }
.btn[data-button-width="wide"], .button[data-button-width="wide"]  { @apply sm:min-w-[20rem]; }
.button[data-button-width="full"],
x-button:has(.button[data-button-width="full"]) { @apply w-full; }

/**
 * Colors
 *
 * We don't need to specifically target "primary" buttons
 * as the button styling defaults to "primary".
 * However, you can, if necessary, by adding a style block
 * like the ones below and changing the color values.
 */
.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
    --button-bg:                  var(--color-secondary);
    --button-color:               var(--color-white);
    --button-border-color:        var(--color-secondary);
    --button-outline-color:       oklch(0.48 0.0136 252.2);
    --button-hover-bg:            var(--color-dark);
    --button-hover-border-color:  var(--color-dark);
    --button-hover-color:         var(--color-white);
    --button-active-bg:           var(--color-dark);
    --button-active-border-color: var(--color-dark);
}

.btn[data-button-color="light"], .button[data-button-color="light"] {
    --button-bg:                  var(--color-white);
    --button-color:               var(--color-dark);
    --button-border-color:        var(--color-white);
    --button-hover-bg:            var(--color-dark);
    --button-hover-border-color:  var(--color-dark);
    --button-hover-color:         var(--color-white);
    --button-active-bg:           var(--color-dark);
    --button-active-border-color: var(--color-dark);
}

.btn[data-button-color="white"], .button[data-button-color="white"] {
    --button-bg:                  var(--color-white);
    --button-color:               var(--color-black);
    --button-border-color:        var(--color-white);
    --button-hover-bg:            var(--color-secondary-200);
    --button-hover-border-color:  var(--color-secondary-200);
    --button-hover-color:         var(--color-black);
    --button-active-bg:           var(--color-secondary-200);
    --button-active-border-color: var(--color-secondary-200);
}

.btn[data-button-color="black"], .button[data-button-color="black"] {
    --button-bg:                  var(--color-black);
    --button-color:               var(--color-white);
    --button-border-color:        var(--color-black);
    --button-hover-bg:            var(--color-secondary);
    --button-hover-border-color:  var(--color-secondary);
    --button-hover-color:         var(--color-dark);
    --button-active-bg:           var(--color-secondary);
    --button-active-border-color: var(--color-secondary);
}

/* Back To Top Button */
#backToTopBtn {
    align-items: center;
    background: var(--color-secondary);
    border: 1px solid transparent;
    border-radius: 100%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    outline: 1px solid transparent;
    padding: 1rem;
    transition: opacity 0.2s, background 0.2s;
    width: 1rem;

    i {
        font-weight: bold;
        display: inline-block;
        margin: -4px 0 0 0;
    }

    &:hover, &:focus {
        background: var(--color-secondary-800);
        border: 1px solid var(--color-secondary);
        color: var(--color-white);
        opacity: 1;
        outline: 1px solid var(--color-secondary);
    }
}