/* Default */
.button {
    --background-color: var(--root-color--primary);
    --border-radius: var(--root-border-radius);

    --border-top-width: var(--root-border-width);
    --border-right-width: var(--root-border-width);
    --border-bottom-width: var(--root-border-width);
    --border-left-width: var(--root-border-width);

    --border-top-style: solid;
    --border-right-style: solid;
    --border-bottom-style: solid;
    --border-left-style: solid;

    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);

    --color: var(--root-color--white);
    --font-family: inherit;
    --font-size: var(--root-font-size); /* Reset, use REM */
    --font-style: normal;
    --font-weight: var(--root-font-weight--bold);
    --height: 3rem;
    --line-height: inherit;
}

.button[aria-disabled="true"] {
    --background-color: var(--root-color--disabled-background, hsla(0, 0%, 20%, .08));

    --border-top-color: var(--root-color--disabled-border, hsla(0, 0%, 20%, .08));
    --border-right-color: var(--root-color--disabled-border, hsla(0, 0%, 20%, .08));
    --border-bottom-color: var(--root-color--disabled-border, hsla(0, 0%, 20%, .08));
    --border-left-color: var(--root-color--disabled-border, hsla(0, 0%, 20%, .08));

    --color: var(--root-color--disabled-text, #929292);
}

.button.button--small {
    /*--font-family: inherit;*/
    /*--font-style: normal;*/
    --font-weight: var(--root-font-weight--normal);
    /*--line-height: inherit;*/
    --height: 2rem;
}

.button__body {
    --font-size: 0.889em;
}

.button.button--small .button__body {
    --font-size: 0.833em;
}

.button:active,
.button:focus,
.button:hover {
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary-dark);
    --background-color: var(--root-color--primary-dark);
}

.button__cta {
    --border-color: var(--root-color--primary);
    --color: var(--root-color-text);
    --color-background: var(--root-color--white);
    --font-family: inherit;
    --font-size: 0.875rem; /* Always 14px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--bold);
    --line-height: 1.142857143; /* 16px */
}

.button[aria-disabled="true"] .button__cta {
    --border-color: var(--root-color--disabled-background);
    --color: var(--root-color--disabled-text);
}

/* Primary style */
.button-primary {
    --background-color: var(--root-color--primary);
    /*--border-radius: var(--root-border-radius);*/

    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);

    --color: var(--root-color--white);
    /*--font-family: inherit;*/
    /*--font-size: var(--root-font-size); !* Reset, use REM *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--bold);*/
    /*--line-height: inherit;*/
}

.button-primary .button__body {
    /*--font-size: 0.889em;*/
}

.button-primary.button--small .button__body {
    /*--font-size: 0.833em;*/
}

.button-primary:hover,
.button-primary:focus,
.button-primary:active {
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary-dark);
    --background-color: var(--root-color--primary-dark);
}

/* Secondary style */
.button-secondary {
    --background-color: var(--root-color--secondary);
    /*--border-radius: var(--root-border-radius);*/

    --border-top-color: var(--root-color--secondary);
    --border-right-color: var(--root-color--secondary);
    --border-bottom-color: var(--root-color--secondary);
    --border-left-color: var(--root-color--secondary);

    --color: var(--root-color-text);
    /*--font-family: inherit;*/
    /*--font-size: var(--root-font-size); !* Reset, use REM *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--bold);*/
    /*--line-height: inherit;*/
}

.button-secondary .button__body {
    /*--font-size: 0.889em;*/
}

.button-secondary.button--small .button__body {
    /*--font-size: 0.833em;*/
}

.button-secondary:hover,
.button-secondary:focus,
.button-secondary:active {
    --border-top-color: var(--root-color--secondary-dark);
    --border-right-color: var(--root-color--secondary-dark);
    --border-bottom-color: var(--root-color--secondary-dark);
    --border-left-color: var(--root-color--secondary-dark);
    --background-color: var(--root-color--secondary-dark);
}

/* Support style */
.button-support {
    --background-color: var(--root-color--support);
    /*--border-radius: var(--root-border-radius);*/

    --border-top-color: var(--root-color--support);
    --border-right-color: var(--root-color--support);
    --border-bottom-color: var(--root-color--support);
    --border-left-color: var(--root-color--support);

    --color: var(--root-color-text);
    /*--font-family: inherit;*/
    /*--font-size: var(--root-font-size); !* Reset, use REM *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--bold);*/
    /*--line-height: inherit;*/
}

.button-support .button__body {
    /*--font-size: 0.889em;*/
}

.button-support.button--small .button__body {
    /*--font-size: 0.833em;*/
}

.button-support:hover,
.button-support:focus,
.button-support:active {
    --border-top-color: var(--root-color--support-dark);
    --border-right-color: var(--root-color--support-dark);
    --border-bottom-color: var(--root-color--support-dark);
    --border-left-color: var(--root-color--support-dark);
    --background-color: var(--root-color--support-dark);
}

/* Red style */
.button-red {
    --background-color: var(--root-color--red);

    --border-top-color: var(--root-color--red);
    --border-right-color: var(--root-color--red);
    --border-bottom-color: var(--root-color--red);
    --border-left-color: var(--root-color--red);

    --color: var(--root-color--white);
}

.button-red:hover,
.button-red:focus,
.button-red:active {
    --background-color: var(--root-color--red-dark);

    --border-top-color: var(--root-color--red-dark);
    --border-right-color: var(--root-color--red-dark);
    --border-bottom-color: var(--root-color--red-dark);
    --border-left-color: var(--root-color--red-dark);

    --color: var(--root-color--white);
}

/* Orange style */
.button-orange {
    --background-color: var(--root-color--orange);

    --border-top-color: var(--root-color--orange);
    --border-right-color: var(--root-color--orange);
    --border-bottom-color: var(--root-color--orange);
    --border-left-color: var(--root-color--orange);

    --color: var(--root-color--white);
}

.button-orange:hover,
.button-orange:focus,
.button-orange:active {
    --background-color: var(--root-color--orange-dark);

    --border-top-color: var(--root-color--orange-dark);
    --border-right-color: var(--root-color--orange-dark);
    --border-bottom-color: var(--root-color--orange-dark);
    --border-left-color: var(--root-color--orange-dark);

    --color: var(--root-color--white);
}

/* Yellow style */
.button-yellow {
    --background-color: var(--root-color--yellow);
    --border-top-color: var(--root-color--yellow);
    --border-right-color: var(--root-color--yellow);
    --border-bottom-color: var(--root-color--yellow);
    --border-left-color: var(--root-color--yellow);
    --color: var(--root-color-text);
}

.button-yellow:hover,
.button-yellow:focus,
.button-yellow:active {
    --background-color: var(--root-color--yellow-dark);

    --border-top-color: var(--root-color--yellow-dark);
    --border-right-color: var(--root-color--yellow-dark);
    --border-bottom-color: var(--root-color--yellow-dark);
    --border-left-color: var(--root-color--yellow-dark);

    --color: var(--root-color-text);
}

/* Green style */
.button-green {
    --background-color: var(--root-color--green);

    --border-top-color: var(--root-color--green);
    --border-right-color: var(--root-color--green);
    --border-bottom-color: var(--root-color--green);
    --border-left-color: var(--root-color--green);

    --color: var(--root-color--white);
}

.button-green:hover,
.button-green:focus,
.button-green:active {
    --background-color: var(--root-color--green-dark);
    --border-top-color: var(--root-color--green-dark);
    --border-right-color: var(--root-color--green-dark);
    --border-bottom-color: var(--root-color--green-dark);
    --border-left-color: var(--root-color--green-dark);
}

/* Open style */
.button-open {
    --background-color: var(--root-color--white);
    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);
    --border-style: solid;
    --border-top-width: 0.125rem;
    --border-right-width: 0.125rem;
    --border-bottom-width: 0.125rem;
    --border-left-width: 0.125rem;
    --color: var(--root-color--primary);
}

.button-open:hover,
.button-open:focus,
.button-open:active {
    --background-color: var(--root-color--white-dark);
    --border-top-color: var(--root-color--primary-darkest);
    --border-right-color: var(--root-color--primary-darkest);
    --border-bottom-color: var(--root-color--primary-darkest);
    --border-left-color: var(--root-color--primary-darkest);
    --color: var(--root-color--primary-darkest);
}

/* Icons */
.button__body .icon.icon--color-primary {
    fill: var(--root-color--white)
}

.button__body .icon.icon--color-secondary {
    fill: var(--root-color--secondary)
}

.button__body .icon.icon--color-support {
    fill: var(--root-color--support)
}

.button__body .icon.icon--color-black {
    fill: var(--root-color-text)
}

.button__body .icon.icon--color-white {
    fill: var(--root-color--white)
}

.button {
    display: inline-flex;
    text-decoration: none;
    vertical-align: middle;
}

.button > * {
    height: 100%;
}

.button[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
}

.button__body {
    display: inline-flex;
    align-items: center;
    height: auto;
    box-sizing: border-box;
    padding: 0 1.25rem;
    text-align: left;
}

.button.button--small .button__body {
    padding: 0 1rem;
}

.button__body .icon {
    flex-shrink: 0;
    height: 1em;
}

.button .icon--pre {
    margin-right: 0.125rem;
    min-height: var(--height);
    height: var(--height);
    flex-grow: 1;
    flex-shrink: 0;
}

.button .icon--before {
    margin-right: 1rem;
}

.button .icon--after {
    margin-left: 1rem;
}

.button.button--small .icon--before {
    margin-right: 0.5rem;
}

.button.button--small .icon--after {
    margin-left: 0.5rem;
}

.button .icon--municipality-set {
    height: 1.75em;
    pointer-events: none;
}

.button__label {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.button__label .file-info {
    overflow: auto;
    white-space: nowrap;
}

/* CTA Button */
.button.button--cta {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    margin-top: 2rem;
}

.button.button--cta .button__body {
    flex: 1;
}

.button__cta {
    display: inline-flex;
    justify-items: center;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
    white-space: nowrap;
}

.button__cta .icon--cta {
    fill: currentColor;
}

.button__cta-text {
    text-align: left;
}

.icon--cta {
    height: 2.25em;
}

@media (min-width: 30rem) {
    .button.button--cta {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .button.button--cta .button__body {
        flex: 1;
    }

    .button__cta {
        height: 100%;
    }

    .button__cta-text {
        text-align: center;
    }
}


.button {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1rem);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    min-height: var(--height, 3rem);
    line-height: var(--line-height, inherit);
    margin-top: 1.5rem;
    margin-right: 1rem;
}

.button.button--small {
    min-height: var(--height, 2rem);
    margin: 0;
}

.button__body {
    font-size: var(--font-size, 0.889em);
    line-height: var(--line-height, inherit);
    color: var(--color, white);

    border-top-width: var(--border-top-width, 0.125rem);
    border-right-width: var(--border-right-width, 0.125rem);
    border-bottom-width: var(--border-bottom-width, 0.125rem);
    border-left-width: var(--border-left-width, 0.125rem);

    border-top-style: var(--border-top-style, solid);
    border-right-style: var(--border-right-style, solid);
    border-bottom-style: var(--border-bottom-style, solid);
    border-left-style: var(--border-left-style, solid);

    border-top-color: var(--border-top-color, #000714);
    border-right-color: var(--border-right-color, #000714);
    border-bottom-color: var(--border-bottom-color, #000714);
    border-left-color: var(--border-left-color, #000714);

    border-radius: var(--border-radius, 0.188rem);
    background-color: var(--background-color, #0349D1);
}

.button__body .icon {
    fill: currentColor;
}

/* CTA Button */
.button.button--cta {
    min-height: calc(2 * var(--height, 3rem));
}

.button.button--cta .button__body {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.button__cta {
    color: var(--color, black);
    background-color: var(--color-background, white);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.875rem);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    line-height: var(--line-height, 1.142857143);
    border-width: var(--border-width, 0.125rem);
    border-style: var(--border-style, solid);
    border-color: var(--border-color, #000714);
    border-radius: var(--border-radius, 0.188rem);
    border-top-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width: 30rem) {
    .button.button--cta {
        min-height: var(--height, 3rem);
    }

    .button.button--cta .button__body {
        border-bottom-width: var(--border-width, 0.125rem);
        border-bottom-left-radius: var(--border-radius, 0.188rem);
        border-right-width: 0;
        border-top-right-radius: 0;
    }

    .button__cta {
        border-top-width: var(--border-width, 0.125rem);
        border-top-right-radius: var(--border-radius, 0.188rem);
        border-left-width: 0;
        border-bottom-left-radius: 0;
    }
}