.dina-button-base {
    border: solid 4 px var(--dina-light-green-100);
    color: var(--dina-greyscale-white-100);
    font-size: 1em;
    border-radius: var(--dina-border-radius-3);
    background-color: var(--dina-light-green-100);
    cursor: pointer;
    display: inline-block;
}



.dina-button-base:hover {
    background-color: var(--dina-light-green-40);
    color: var(--dina-greyscale-black-90);
}

.dina-button-base:focus {
    border-color: var(--dina-light-green-40);
}

.dina-button-base.dina-button-disable {
    color: var(--dina-greyscale-black-90);
    border-color: currentColor;
    background-color: var(--dina-greyscale-black-20);
}

.dina-button-base.dina-button-small {
    font-size: .875em;
    padding: var(--dina-spacing-8) var(--dina-spacing-12);
}

.dina-button-base.dina-button-medium {
    font-size: 1em;
    padding: var(--dina-spacing-12) var(--dina-spacing-24);
}

.dina-button-base.dina-button-large {
    font-size: 1.25em;
    padding: var(--dina-spacing-16) var(--dina-spacing-32);
}

.dina-button-base.dina-button--margin-vertical {
    margin-top: 1em;
    margin-bottom: 1em;
}


.dina-button {
    display: inline-flex;
    padding: 0.75rem 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background-color: var(--dina-light-green-100);
    color: var(--dina-greyscale-white-100);
    font-family: var(--dina-font-headline);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    line-height: 145%;
    letter-spacing: 0.02625rem;
    text-transform: uppercase;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.dina-button:hover {
    text-decoration: underline;
}

.dina-button:focus-visible {
    box-shadow: 0px 1px 2px 0px rgba(28, 125, 31, 0.30), 0px 0px 0px 4px rgba(28, 125, 31, 0.30);
}

.dina-button--icon-left,
.dina-button--icon-right {
    background-size: 0;
    gap: 0.5rem;
}

.dina-button--icon-left::before,
.dina-button--icon-right:after {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-image: var(--dina-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dina-button::before,
.dina-button::after {
    filter: var(--dina-filter--greyscale-white-100);
}


.dina-button--xs {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.dina-button--xs::before,
.dina-button--xs::after {
    width: 1rem;
    height: 1rem;
}

.dina-button--sm {
    font-size: 0.75rem;
    padding: 0.75rem 1rem;
}

.dina-button--sm::before,
.dina-button--sm::after {
    width: 1rem;
    height: 1rem;
}

.dina-button--md {}

.dina-button--lg {
    font-size: 1rem;
    padding: 1rem 1.5rem;
}

.dina-button--xl {
    font-size: 1.125rem;
    padding: 1rem 2rem;
}

.dina-button--xl::before,
.dina-button--xl::after {
    width: 1.5rem;
    height: 1.5rem;
}

/* GREEN */
.dina-button--green {}

.dina-button--green:hover {
    background-color: var(--dina-light-green-40);
    color: var(--dina-greyscale-black-90);
}

.dina-button--green:hover::before,
.dina-button--green:hover::after {
    filter: var(--dina-filter--greyscale-black-90);
}

.dina-button--green:focus-visible {
    background-color: var(--dina-light-green-100);
    color: var(--dina-greyscale-white-100);
}

.dina-button--green:hover:focus-visible::before,
.dina-button--green:hover:focus-visible::after {
    filter: var(--dina-filter--greyscale-white-100);
}

.dina-button--green:disabled {
    background-color: var(--dina-greyscale-black-20);
    color: var(--dina-greyscale-black-80);
    text-decoration: none;
}



/* OUTLINE-GREEN */
.dina-button--outline-green {
    background-color: var(--dina-greyscale-white-100);
    border: 2px solid var(--dina-light-green-40);
    color: var(--dina-light-green-100);
}

.dina-button--outline-green:hover {
    border-color: var(--dina-light-green-60);
    color: var(--dina-greyscale-black-90);
}

.dina-button--outline-green::before,
.dina-button--outline-green::after,
.dina-button--outline-green:hover::before,
.dina-button--outline-green:hover::after {
    filter: var(--dina-filter--greyscale-black-90);
}

.dina-button--outline-green:focus-visible {
    border-color: var(--dina-light-green-100);
    color: var(--dina-light-green-100);
    box-shadow: 0px 1px 2px 0px rgba(28, 125, 31, 0.30), 0px 0px 0px 4px rgba(28, 125, 31, 0.30);
}




/* DARKGREEN */
.dina-button--darkgreen {
    background-color: var(--dina-dark-green-100);
    color: var(--dina-greyscale-white-100);
}

.dina-button--darkgreen:hover {
    background-color: var(--dina-light-green-40);
    color: var(--dina-greyscale-black-90);
}

.dina-button--darkgreen:hover::before,
.dina-button--darkgreen:hover::after {
    filter: var(--dina-filter--greyscale-black-90);
}

.dina-button--darkgreen:focus-visible {
    background-color: var(--dina-dark-green-100);
    color: var(--dina-greyscale-white-100);
}

.dina-button--darkgreen:hover:focus-visible::before,
.dina-button--darkgreen:hover:focus-visible::after {
    filter: var(--dina-filter--greyscale-white-100);
}


/* OUTLINE-DARKGREEN */

.dina-button--outline-darkgreen {
    background-color: var(--dina-greyscale-white-100);
    border: 2px solid var(--dina-dark-green-70);
    color: var(--dina-dark-green-100);
}

.dina-button--outline-darkgreen:hover {
    border-color: transparent;
    background-color: var(--dina-light-green-40);
    color: var(--dina-greyscale-black-90);
}

.dina-button--outline-darkgreen:focus-visible {
    border-color: var(--dina-dark-green-100);
    background-color: var(--dina-greyscale-white-100);
    color: var(--dina-dark-green-100);
}

.dina-button--outline-darkgreen::before,
.dina-button--outline-darkgreen::after,
.dina-button--outline-darkgreen:hover::before,
.dina-button--outline-darkgreen:hover::after {
    filter: var(--dina-filter--greyscale-black-90);
}


/* RED */
.dina-button--red {
    background-color: var(--dina-red-1-100);
}

.dina-button--red:hover {
    background-color: var(--dina-red-1-60);
    color: var(--dina-greyscale-black-90);
}

.dina-button--red:hover::before,
.dina-button--red:hover::after {
    filter: var(--dina-filter--greyscale-black-90);
}

.dina-button--red:focus-visible {
    background-color: var(--dina-red-1-100);
    color: var(--dina-greyscale-white-100);
    box-shadow: 0px 1px 2px 0px rgba(207, 68, 46, 0.30), 0px 0px 0px 4px rgba(207, 68, 46, 0.30);
}

.dina-button--red:hover:focus-visible::before,
.dina-button--red:hover:focus-visible::after {
    filter: var(--dina-filter--greyscale-white-100);
}



/* OUTLINE-RED */
.dina-button--outline-red {
    background-color: var(--dina-greyscale-white-100);
    border: 2px solid var(--dina-red-1-100);
    color: var(--dina-red-1-100);
}

.dina-button--outline-red::before,
.dina-button--outline-red::after {
    filter: var(--dina-filter--alert-red);
}

.dina-button--outline-red:hover {
    border-color: var(--dina-red-1-60);
    color: var(--dina-greyscale-black-90);
}

.dina-button--outline-red:hover::before,
.dina-button--outline-red:hover::after {
    filter: var(--dina-filter--greyscale-black-90);
}

.dina-button--outline-red:focus-visible {
    border-color: var(--dina-red-1-100);
    color: var(--dina-red-1-100);
    box-shadow: 0px 1px 2px 0px rgba(207, 68, 46, 0.30), 0px 0px 0px 4px rgba(207, 68, 46, 0.30);
}

.dina-button--outline-red:focus-visible:hover::before,
.dina-button--outline-red:focus-visible:hover::after {
    filter: var(--dina-filter--alert-red);
}


/* WHITE */
.dina-button--white {
    background-color: var(--dina-greyscale-white-100);
    border: 2px solid var(--dina-greyscale-white-100);
    color: var(--dina-greyscale-black-90);
}

.dina-button--white::before,
.dina-button--white::after,
.dina-button--white:hover::before,
.dina-button--white:hover::after {
    filter: var(--dina-filter--greyscale-black-90);
}

.dina-button--outline-white {}



@media all and (max-width: 560px) {
    .dina-button--md {
        font-size: 0.75rem;
        padding: 0.75rem 1rem;
    }
}


.dina-button:disabled {
    background-color: var(--dina-greyscale-black-20);
    color: var(--dina-greyscale-black-80);
    border-color: var(--dina-greyscale-black-20);
    cursor: auto;
    text-decoration: none;
}

.dina-button:disabled::before,
.dina-button:disabled::after {
    filter: var(--dina-filter--greyscale-black-80);
}