body {
    .dark {
        /* primary */
        --tw-button--primary-background: var(--color-neutral-white--neutral_0);
        --tw-button--primary-hover-background: var(--color-alpha--white_alpha_75);
        --tw-button--primary-text-color: var(--color-brand--kind_blue_raw);
        --tw-button--primary-disabled-background: var(--color-alpha--white_alpha_15);
        --tw-button--primary-disabled-text-color: var(--color-alpha--white_alpha_25);

        /* secondary */
        --tw-button--secondary-background: var(--color-brand--kind_blue_raw);
        --tw-button--secondary-hover-background: var(--color-alpha--white_alpha_25);
        --tw-button--secondary-text-color: var(--color-neutral-white--neutral_0);
        --tw-button--secondary-border-color: var(--color-neutral-white--neutral_0);
        --tw-button--secondary-disabled-background: #000;
        --tw-button--secondary-disabled-text-color: var(--color-alpha--white_alpha_25);
        --tw-button--secondary-disabled-border-color: var(--color-alpha--white_alpha_25);

        /* button border color */
        --tw-button--border-color: var(--color-neutral-white--neutral_0);

        /* naked */
        --tw-button--naked-background: var(--color-brand--kind_blue_raw);
        --tw-button--naked-disabled-text-color: var(--color-alpha--white_alpha_25);
        --tw-button--naked-text-color: var(--color-neutral-white--neutral_0);

        /* button icons - arrows */
        --button--icon-arrow-primary: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-secondary.svg");
        --button--icon-arrow-secondary: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-primary.svg");
        --button--icon-arrow-disabled: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-disabled.svg");

        /* primary link */
        --link--primary-text-color: var(--color-neutral-white--neutral_0);
        --link--primary-hover-text-color: var(--color-alpha--white_alpha_45);

        /* secondary link */
        --link--secondary-text-color: var(--color-neutral-white--neutral_0);
        --link--secondary-hover-text-color: var(--color-alpha--white_alpha_45);

        /* disabled link */
        --link--disabled-text-color: var(--color-alpha--white_alpha_25);

        /* link icons - arrows */
        --link--primary-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-primary.svg");
        --link--primary-hover-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-dark-hover.svg");
        --link--secondary-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-primary.svg");
        --link--secondary-hover-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-dark-hover.svg");
        --link--disabled-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-disabled.svg");

        /* link icons - pluses */
        --link--primary-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-white.svg");
        --link--secondary-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-white.svg");
        --link---hover-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-dark-mode.svg");
        --link---disabled-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-dark-mode.svg");

        /* close icons */
        --icon-close--enable: url("/wp-content/themes/teamwire/assets/img/icons/close/dark/icon-close--enabled-dark.svg");
        --icon-close--hover: url("/wp-content/themes/teamwire/assets/img/icons/close/dark/icon-close--hover-dark.svg");
        --icon-close--disabled: url("/wp-content/themes/teamwire/assets/img/icons/close/dark/icon-close--disabled-dark.svg");
        --icon-close--enable-slim: url("/wp-content/themes/teamwire/assets/img/icons/close/dark/icon-close--enabled-slim-dark.svg");
        --icon-close--hover-slim: url("/wp-content/themes/teamwire/assets/img/icons/close/dark/icon-close--hover-slim-dark.svg");
        --icon-close--disabled-slim: url("/wp-content/themes/teamwire/assets/img/icons/close/dark/icon-close--disabled-slim-dark.svg");

        /* tab buttons */
        --button-tab--primary-selected-background: var(--color-alpha--white_alpha_15);
        --button-tab--primary-hover-background: var(--color-alpha--white_alpha_15);
        --button-tab--primary-enabled-background: transparent;
        --button-tab--primary-selected-text-color: var(--color-neutral-white--neutral_0);
        --button-tab--primary-enabled-text-color: var(--color-neutral-white--neutral_0);
        --button-tab--primary-hover-text-color: var(--color-neutral-white--neutral_0);
        --button-tab--primary-underline-color: var(--color-neutral-white--neutral_0);
        --button-tab--secondary-background: transparent;
        --button-tab--secondary-text-color: var(--color-neutral-white--neutral_0);
    }

    &, .button-light {
        /* primary */
        --tw-button--primary-background: var(--color-brand--kind_blue_medium);
        --tw-button--primary-hover-background: #054fc6;
        --tw-button--primary-text-color: var(--color-neutral-white--neutral_0);
        --tw-button--primary-disabled-background: var(--color-alpha--black_alpha_15);
        --tw-button--primary-disabled-text-color: var(--color-alpha--black_alpha_15);

        /* secondary */
        --tw-button--secondary-background: var(--color-neutral-white--neutral_bright_white);
        --tw-button--secondary-hover-background: var(--color-alpha--black_alpha_15);
        --tw-button--secondary-text-color: var(--color-brand--kind_blue_raw);
        --tw-button--secondary-border-color: var(--color-brand--kind_blue_raw);
        --tw-button--secondary-disabled-background: var(--color-alpha--black_alpha_15);
        --tw-button--secondary-disabled-text-color: var(--color-alpha--black_alpha_15);
        --tw-button--secondary-disabled-border-color: var(--color-alpha--white_alpha_25);

        /* button border color */
        --tw-button--border-color: var(--color-brand--kind_blue_raw);

        /* naked */
        --tw-button--naked-background: var(--color-neutral-white--neutral_0);
        --tw-button--naked-text-color: var(--color-brand--kind_blue_raw);
        --tw-button--naked-disabled-text-color: var(--color-alpha--black_alpha_15);

        /* paddings */
        --button--padding-xs: var(--space-6) var(--space-12);
        --button--padding-small: var(--space-8) var(--space-16);
        --button--padding-medium: var(--space-12) var(--space-20);
        --button--padding-large: var(--space-12) var(--space-20);

        /* button icons - arrows */
        --button--icon-arrow-primary: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-primary.svg");
        --button--icon-arrow-secondary: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-secondary.svg");
        --button--icon-arrow-disabled: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-disabled.svg");

        /* links */
        /* primary */
        --link--primary-text-color: var(--color-brand--kind_blue_medium);
        --link--primary-hover-text-color: var(--color-alpha--black_alpha_65);

        /* secondary */
        --link--secondary-text-color: var(--color-brand--kind_blue_raw);
        --link--secondary-hover-text-color: var(--color-alpha--black_alpha_65);

        /* disabled */
        --link--disabled-text-color: var(--color-alpha--black_alpha_15);

        /* link icons - arrows */
        --link--primary-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-blue-medium.svg");
        --link--primary-hover-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-hover-grey.svg");
        --link--secondary-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-secondary.svg");
        --link--secondary-hover-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-hover-grey.svg");
        --link--disabled-arrow-icon: url("/wp-content/themes/teamwire/assets/img/icons/arrows/arrow-right-disabled.svg");

        /* link icons - pluses */
        --link--primary-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-blue.svg");
        --link--secondary-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-secondary.svg");
        --link---hover-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-hover.svg");
        --link---disabled-plus-icon: url("/wp-content/themes/teamwire/assets/img/icons/pluses/icon-plus-disabled.svg");

        /* icon buttons */
        --button--icon-play: url("/wp-content/themes/teamwire/assets/img/icons/media/play.svg");
        --button--icon-play--hover: url("/wp-content/themes/teamwire/assets/img/icons/media/play-hover.svg");
        --button--icon-pause: url("/wp-content/themes/teamwire/assets/img/icons/media/pause.svg");
        --button--icon-pause--hover: url("/wp-content/themes/teamwire/assets/img/icons/media/pause-hover.svg");
        --button--icon-replay: url("/wp-content/themes/teamwire/assets/img/icons/media/replay.svg");
        --button--icon-replay--hover: url("/wp-content/themes/teamwire/assets/img/icons/media/replay-hover.svg");

        /* close icons - sizes */
        --icon-close--default: var(--icon-size--40);
        --icon-close--slim: var(--icon-size--32);

        /* close icons */
        --icon-close--enable: url("/wp-content/themes/teamwire/assets/img/icons/close/light/icon-close--enabled.svg");
        --icon-close--hover: url("/wp-content/themes/teamwire/assets/img/icons/close/light/icon-close--hover.svg");
        --icon-close--disabled: url("/wp-content/themes/teamwire/assets/img/icons/close/light/icon-close--disabled.svg");
        --icon-close--enable-slim: url("/wp-content/themes/teamwire/assets/img/icons/close/light/icon-close--enabled-slim.svg");
        --icon-close--hover-slim: url("/wp-content/themes/teamwire/assets/img/icons/close/light/icon-close--hover-slim.svg");
        --icon-close--disabled-slim: url("/wp-content/themes/teamwire/assets/img/icons/close/light/icon-close--disabled-slim.svg");

        /* tab buttons */
        --button-tab--primary-selected-background: var(--color-alpha--black_alpha_80);
        --button-tab--primary-hover-background: var(--color-alpha--black_alpha_15);
        --button-tab--primary-enabled-background: var(--color-alpha--black_alpha_5);
        --button-tab--primary-selected-text-color: var(--color-neutral-white--neutral_0);
        --button-tab--primary-enabled-text-color: var(--color-brand--kind_blue_raw);
        --button-tab--primary-hover-text-color: var(--color-brand--kind_blue_raw);
        --button-tab--primary-border-radius: var(--radius-full);
        --button-tab--primary-padding: var(--space-8) var(--space-32);
        --button-tab--primary-padding-slim: var(--space-12) var(--space-16);
        --button-tab--primary-underline-color: var(--color-brand--kind_blue_raw);
        --button-tab--secondary-background: transparent;
        --button-tab--secondary-text-color: var(--color-brand--kind_blue_raw);
    }
}

body {
    .tw-button,
    a.tw-button,
    button.tw-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: var(--button-large);
        font-family: var(--font-family--default);
        border-radius: var(--radius-10);
        transition: all var(--timing--transition-duration) var(--timing--transition-function);
        cursor: pointer;
        box-shadow: var(--shadow-md);
        padding: var(--button--padding-medium);
        border: none;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;

        &.tw-button--trailing {
            gap: var(--space-6);

            &:after {
                content: '';
                background-image: var(--button--icon-arrow-primary);
                background-repeat: no-repeat;
                width: 1.125em;
                height: 1.125em;
                background-size: contain;
                background-position: center;
                transform: translateX(0);
                transition: transform var(--timing--transition-duration) var(--timing--transition-function);
            }

            &:hover {
                &:after {
                    transform: translateX(var(--space-8));
                }
            }
        }

        &:disabled {
            &:hover {
                &:after {
                    transform: none;
                }
            }
        }

        &.tw-button--xs {
            font-size: var(--button-small);
            padding: var(--button--padding-xs);
            border-radius: var(--radius-6);
        }

        &.tw-button--small {
            font-size: var(--button-medium);
            padding: var(--button--padding-small);
            border-radius: var(--radius-8);
        }

        &.tw-button--large {
            font-size: var(--button-xl);
            padding: var(--button--padding-large);
            border-radius: var(--radius-12);
        }

        &.tw-button--primary {
            background: var(--tw-button--primary-background);
            color: var(--tw-button--primary-text-color);

            &:hover {
                background: var(--tw-button--primary-hover-background);
                color: var(--tw-button--primary-text-color);
            }

            &:disabled {
                color: var(--tw-button--primary-disabled-text-color);
                background: var(--tw-button--primary-disabled-background);

                &:hover {
                    text-decoration: none;
                }
            }

            &.blue-light {
                background-color: var(--color-brand--kind_blue_light);
            }

            &.lime-melon-light {
                background-color: var(--color-accent--lime_melon_light);
            }

            &.teal-turquoise-light {
                background-color: var(--color-accent--teal_turquoise_light);
            }

            &.king-crimson-light {
                background-color: var(--color-accent-king_crimson_light);
            }

            &.chilli-red-light {
                background-color: var(--color-accent-chili_red_light);
            }

            &.pumpkin-orange-light {
                background-color: var(--color-accent-pumpkin_oranged_light);
            }

            &.keen-green-light {
                background-color: var(--color-accent-keen_green_light);
            }

            &.mustard-yellow-light {
                background-color: var(--color-accent-mustard_yellow_light);
            }

            &.deep-purple-light {
                background-color: var(--color-accent-deep_purple_light);
            }

            &.white {
                color: var(--color-neutral-white--neutral_0);
            }

            &.dark {
                background: var(--tw-button--primary-background);
                color: var(--tw-button--primary-text-color);

                &:hover {
                    background: var(--tw-button--primary-hover-background);
                    color: var(--tw-button--primary-text-color);
                }

                &:disabled {
                    color: var(--tw-button--primary-disabled-text-color);
                    background: var(--tw-button--primary-disabled-background);

                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }

            &.tw-button--secondary {
                background: var(--tw-button--secondary-background);
                color: var(--tw-button--secondary-text-color);
                outline: 2px solid var(--tw-button--border-color);
                outline-offset: -2px;

                &:hover {
                    background: var(--tw-button--secondary-hover-background);
                    color: var(--tw-button--secondary-text-color);
                }

                &:disabled {
                    color: var(--tw-button--secondary-disabled-text-color);
                    background: var(--tw-button--secondary-disabled-background);
                    outline-color: var(--tw-button--secondary-disabled-border-color);
                }

                &.tw-button--trailing {
                    &:after {
                        background-image: var(--button--icon-arrow-secondary);
                    }
                }
            }

            &.tw-button--naked {
                background: transparent;
                color: var(--tw-button--naked-text-color);
                text-decoration: underline;
                text-underline-offset: 3px;
                transition: all var(--timing--transition-duration) var(--timing--transition-function);
                box-shadow: none;
                padding: 0;

                &:hover {
                    text-decoration: none;
                    color: var(--tw-button--naked-text-color);
                }

                &:disabled {
                    color: var(--tw-button--naked-disabled-text-color);
                    text-decoration: underline;
                }

                &.tw-button--trailing {
                    text-decoration: none !important;

                    &:after {
                        background-image: var(--button--icon-arrow-secondary);
                    }
                }

                &.tw-button--no-link {
                    text-decoration: none;
                    cursor: default;

                    &:hover {
                        text-decoration: none;
                    }
                }
            }

            /* text link button */

            &.tw-button--link {
                font-size: var(--button-medium);
                transition: all var(--timing--transition-duration) var(--timing--transition-function);
                box-shadow: none;
                text-underline-offset: 3px;
                color: var(--link--primary-text-color);
                text-decoration: underline;
                background: transparent;
                padding: 0;
                gap: var(--space-6);
                line-height: 25px;

                &.slim {
                    font-size: var(--button-medium);
                }

                &:hover {
                    text-decoration: none;
                    color: var(--link--primary-hover-text-color);
                }

                &:disabled {
                    background: transparent;
                    color: var(--link--disabled-text-color);

                    &:hover {
                        transform: none;
                        text-decoration: underline;
                    }
                }

                &.tw-button-link--trailing {
                    text-decoration: none;
                    transition: all var(--timing--transition-duration) var(--timing--transition-function);

                    &:after {
                        content: '';
                        background-image: var(--link--primary-arrow-icon);
                        background-repeat: no-repeat;
                        background-size: contain;
                        width: 1.125em;
                        height: 1.125em;
                        background-position: center;
                        transform: translateX(0);
                        transition: transform var(--timing--transition-duration) var(--timing--transition-function);
                    }

                    &:hover {
                        &:after {
                            background-image: var(--link--primary-hover-arrow-icon);
                            transform: translateX(var(--space-8));
                        }
                    }

                    &:disabled {
                        color: var(--link--disabled-text-color);
                        text-decoration: underline;

                        &:after {
                            background-image: var(--link--disabled-arrow-icon);
                        }

                        &:hover {
                            color: var(--link--disabled-text-color);

                            &:after {
                                background-image: var(--link--disabled-arrow-icon);
                                transform: none;
                            }
                        }
                    }
                }

                &.tw-button-link--trailing-plus {
                    text-decoration: none;
                    transition: all var(--timing--transition-duration) var(--timing--transition-function);
                    gap: var(--space-4);

                    &:before {
                        content: '';
                        background-image: var(--link--primary-plus-icon);
                        background-repeat: no-repeat;
                        background-size: contain;
                        width: 1.125em;
                        height: 1.125em;
                        background-position: center center;
                    }

                    &:hover {
                        &:before {
                            background-image: var(--link---hover-plus-icon);
                        }
                    }

                    &:disabled {
                        color: var(--link--disabled-text-color);

                        &:hover {
                            text-decoration: none;
                        }

                        &:before {
                            background-image: var(--link---disabled-plus-icon);
                        }
                    }
                }

                &.tw-button-link--secondary {
                    color: var(--link--secondary-text-color);
                    text-decoration: underline;

                    &:hover {
                        color: var(--link--secondary-hover-text-color);
                        text-decoration: none;
                    }

                    &.tw-button-link--trailing {
                        text-decoration: none;

                        &:after {
                            background-image: var(--link--secondary-arrow-icon);
                        }

                        &:hover {
                            &:after {
                                background-image: var(--link--secondary-hover-arrow-icon);
                            }
                        }

                        &:disabled {
                            color: var(--link--disabled-text-color);

                            &:after {
                                background-image: var(--link--disabled-arrow-icon);
                            }

                            &:hover {
                                color: var(--link--disabled-text-color);

                                &:after {
                                    background-image: var(--link--disabled-arrow-icon);
                                    transform: none;
                                }
                            }
                        }
                    }

                    &.tw-button-link--trailing-plus {
                        text-decoration: none;

                        &:before {
                            background-image: var(--link--secondary-plus-icon);
                        }

                        &:hover {
                            &:before {
                                background-image: var(--link---hover-plus-icon);
                            }
                        }

                        &:disabled {
                            color: var(--link--disabled-text-color);

                            &:before {
                                background-image: var(--link---disabled-plus-icon);
                            }
                        }
                    }
                }
            }

            &.tw-button--media {
                background: transparent;
                box-shadow: none;
                transition: all var(--timing--transition-duration) var(--timing--transition-function);

                &:before {
                    content: "";
                    background-image: none;
                    background-repeat: no-repeat;
                    width: var(--icon-size--24);
                    height: var(--icon-size--24);
                    background-size: contain;
                    display: block;
                }

                &.tw-button--play {
                    &:before {
                        background-image: var(--button--icon-play);
                    }

                    &:hover {
                        &:before {
                            background-image: var(--button--icon-play--hover);
                        }
                    }
                }

                &.tw-button--pause {
                    &:before {
                        background-image: var(--button--icon-pause);
                    }

                    &:hover {
                        &:before {
                            background-image: var(--button--icon-pause--hover);
                        }
                    }
                }

                &.tw-button--replay {
                    &:before {
                        background-image: var(--button--icon-replay);
                    }

                    &:hover {
                        &:before {
                            background-image: var(--button--icon-replay--hover);
                        }
                    }
                }
            }

            &.tw-button--close {
                box-shadow: none;
                transition: all var(--timing--transition-duration) var(--timing--transition-function);
                background: none;
                padding: 0;

                &:before {
                    content: "";
                    background-image: var(--icon-close--enable);
                    background-repeat: no-repeat;
                    background-position: center;
                    width: var(--icon-close--default);
                    height: var(--icon-close--default);
                }

                &:hover {
                    &:before {
                        background-image: var(--icon-close--hover);
                    }
                }

                &:disabled {
                    &:before {
                        background-image: var(--icon-close--disabled);
                    }
                }

                &.tw-button--close-slim {
                    &:before {
                        background-image: var(--icon-close--enable-slim);
                        width: var(--icon-close--slim);
                        height: var(--icon-close--slim);
                    }

                    &:hover {
                        &:before {
                            background-image: var(--icon-close--hover-slim);
                        }
                    }

                    &:disabled {
                        &:before {
                            background-image: var(--icon-close--disabled-slim);
                        }
                    }
                }
            }

            &.tw-button--tab {
                background: var(--button-tab--primary-enabled-background);
                color: var(--button-tab--primary-enabled-text-color);
                box-shadow: none;
                padding: var(--button-tab--primary-padding);
                border-radius: var(--button-tab--primary-border-radius);
                font-weight: var(--font-weight--semibold);
                font-size: var(--font-size--body-xl);
                transition: all var(--timing--transition-duration) var(--timing--transition-function);

                &:active {
                    background: var(--button-tab--primary-selected-background);
                    color: var(--button-tab--primary-selected-text-color);
                }

                &:hover {
                    background: var(--button-tab--primary-hover-background);
                    color: var(--button-tab--primary-hover-text-color);
                }

                &.tw-button--tab-secondary {
                    padding: 0;
                    border-radius: 0;
                    background: var(--button-tab--secondary-background);
                    color: var(--button-tab--secondary-text-color);
                    text-decoration-line: none;
                    text-underline-offset: 12px;
                    text-decoration-thickness: 3px;
                    text-decoration-color: var(--button-tab--secondary-text-color);

                    &:active {
                        text-decoration-line: underline;
                        background: var(--button-tab--secondary-background);
                        color: var(--button-tab--secondary-text-color);
                    }

                    &:hover {
                        text-decoration-line: underline;
                        background: var(--button-tab--secondary-background);
                        color: var(--button-tab--secondary-text-color);
                    }
                }

                &.tw-button--tab-slim {
                    padding: var(--button-tab--primary-padding-slim);
                    font-size: var(--font-size--body-m);
                }
            }
        }

        .dark {
            .tw-button,
            a.tw-button,
            button.tw-button {
                box-shadow: none;

                &.tw-button--link {
                    background-color: transparent;
                }
            }
        }
    }