@import 'variables';

.button {
    padding: 11px 24px;
    border: 2px solid $primary-color;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: $font-size;
    font-family: $body-font;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    background-color: $bg-color;
    color: $primary-color;
    display: inline-block;
    line-height: 1.2;

    &:not(.button-hoverless) {
        &:hover,
        &:focus {
            background-color: color('blue', 900);
            color: color('gray', 200) !important;
            border-color: color('blue', 900);
        }
    }

    &.disabled,
    &:disabled {
        background-color: color('gray', 400);
        border: 2px solid color('gray', 800);
        color: color('gray', 800) !important;
        cursor: not-allowed;
    }

    &:visited {
        color: $primary-color;
    }

    &.icon:before {
        margin-right: 12px;
    }
}
.button-unstyled {
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: inline;
    margin: 0;
    padding: 0;
    text-align: left;
    color: inherit;

    &:visited {
        color: inherit;
    }

    &.icon:before {
        margin-right: 8px;
    }
}
.button-full-width {
    width: 100%;
}
.button-primary,
a.button-primary {
    background-color: $primary-color;
    color: $bg-color !important;

    &.disabled,
    &:disabled {
        background-color: color('gray', 400);
        border: 2px solid color('gray', 900);
        color: color('gray', 900) !important;
    }
}
.button-secondary,
a.button-secondary {
    background-color: $bg-color;
    color: $primary-color !important;
}
.button-warning,
a.button-warning {
    background-color: $bg-color;
    border-color: $warning-color;
    color: $warning-color !important;

    &:not(.button-hoverless) {
        &:hover,
        &:focus {
            background-color: $warning-color !important;
            border-color: $warning-color !important;
        }
    }
}
.button-error,
a.button-error {
    background-color: $bg-color;
    border-color: $error-color;
    color: $error-color !important;

    &:not(.button-hoverless) {
        &:hover,
        &:focus {
            background-color: $error-color !important;
            border-color: $error-color !important;
        }
    }
}
.button-small {
    padding: 5px 8px;

    &.icon:before {
        margin-right: 8px;
    }
}
.button-fit-content {
    height: fit-content;
    margin: auto 0;
    padding: 5px 0;
}

canvas {
    border: 2px solid $primary-color;
    border-radius: 2px;
}

.signature-input {
    .canvas-blocked-overlay {
        background-color: color('gray', 700);
        color: color('gray', 200);
    }

    canvas[id*='signature'] {
        user-select: none;
        touch-action: none;
        background-color: $bg-color;
    }
}

// On the off chance that this might not *immediately* be obvious to everyone: Our colors are defined as HSB and run
// through a function that converts them to HSL. Sass then (not so) helpfully converts them to hex for us.
// Unfortunately, we are using a data URL here and a `#` in a URL is a fragment identifier. Now, most browsers
// apparently still produce the expected result—except Firefox (see: https://codepen.io/gunnarbittersmann/pen/BoovjR). I
// mean, good on you for adhering to the spec. But still. Come on.
// Anyway, that is why we are URL-encoding the `#` here (inspired by: https://codepen.io/kevinweber/pen/dXWoRw).
$required-asterisk-svg: str-replace(
    'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="9.5" width="10"><path d="M10 4.45l-.7-2.07-3.56 1.57L6.12 0H3.86l.38 3.93L.68 2.4 0 4.45l3.81.83L1.23 8.2l1.8 1.3L5 6.15 6.97 9.5l1.8-1.32-2.6-2.9z" fill="' +
        $accent_color + '"/></svg>',
    '#',
    '%23'
);
#{$text-inputs} {
    border: 2px solid $primary-color; /*none*/
    border-radius: 2px;
    padding: 7px;
    box-sizing: border-box;
    appearance: none;
    color: $primary-color;
    background-color: $bg-color;
    font-family: $body-font;
    font-size: $font-size - 2px;
    cursor: auto; // Normalize value for the tests.

    &.form-element {
        width: 100%;
    }

    &:required {
        background: $bg-color url($required-asterisk-svg) no-repeat;
        background-position: top 8px right 5px;
        padding-right: 20px;
        box-shadow: none !important;
    }
}
textarea.form-element {
    max-width: 100%;
    min-width: 100%;
    line-height: 1.6;
    appearance: none;
}
input::placeholder,
textarea::placeholder {
    color: color('black'); // This is dimmed down by the browser anyway.
}

.input-addon-container {
    display: flex;

    #{$text-inputs} {
        border-right: none;
        // TODO: This currently works for addons on the left.
        border-radius: 2px 0 0 2px;
    }

    .input-addon {
        flex: 1;
        border: 2px solid $primary-color;
        // TODO: Same here.
        border-radius: 0 2px 2px 0;
        background-color: $primary-color;
        color: $bg-color;
        padding: 7px 10px;
    }
}

@mixin disabled-input {
    background-color: color('gray', 400);
    border: 2px solid color('gray', 800);
    color: color('gray', 800) !important;
    cursor: not-allowed;
}
// We can (unfortunately) neither use `:read-only` nor `:moz-read-only`, since the implementations vary wildly and tend to match way too many things.
// Thus, always add the class `readonly` to readonly inputs.
input.readonly,
input:disabled,
select:disabled {
    @include disabled-input;
}

.box {
    box-sizing: border-box;
    border: 4px solid $primary-color;
    border-radius: 2px;
    padding: 20px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0 !important;

        &.has-margin {
            margin-top: 20px;
        }
    }
}
.box-error {
    border-color: $error-color;
}
.box-warning {
    border-color: $warning-color;
}
.box-info {
    border-color: $info-color;
}
.box-success {
    border-color: $success-color;
}

.box-compact {
    padding: 10px;
}
.box-thin {
    border-width: 2px;
}

.hint {
    position: relative;
    margin-bottom: 2em;
    padding-right: 45px;
}

.star {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 5px;
    @include mobile {
        left: 10px;
        top: inherit !important;
        margin-top: 0 !important;
    }
    & + p {
        @include mobile {
            margin-top: 40px;
        }
    }
}

.select-container {
    position: relative;
    width: 200px;

    select {
        appearance: none; /* TODO: This is actually a little debatable, since appearance is as of now not supported in every browser (especially IE 11, Edge does though with -webkit- prefix weirdly enough). But it is not breaking, so I think it is ok this way */
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 30px;
        width: 100%;
        background-color: transparent;
    }

    .icon {
        position: absolute;
        right: 10px;
        top: 5px;
        color: $primary-color;
        z-index: -1;
    }
}

/* Only semantical fieldset */
.label-only-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;

    & > legend {
        padding: 0;
        display: table; // This needs to be done for correct wrapping in some browsers, see https://thatemil.com/blog/2015/01/03/reset-your-fieldset/
    }
}

/* Radio Buttons */
.radio-group {
    display: flex;
    flex-direction: row;

    .radio-wrapper {
        .radio-label {
            input.form-element {
                appearance: none;
                @extend %sr-only;
            }

            display: inline-block;
            border: 2px solid $primary-color;
            padding: 10px;
            border-radius: 0;
            background-color: $bg-color;
            color: $primary-color;
            border-left: none;
            margin-bottom: 5px;
            cursor: pointer;

            .icon::before {
                margin-right: 8px;
            }

            &.active {
                background-color: $primary-color;
                color: $bg-color;
            }
            &.disabled {
                background-color: color('gray', 400);
                border: 2px solid color('gray', 800);
                color: color('gray', 800) !important;
                cursor: not-allowed;
            }
            &:not(.disabled) {
                &:hover,
                &:focus,
                &:focus-within {
                    background-color: color('blue', 900);
                    color: $bg-color;
                }
            }
        }

        /* stylelint-disable csstools/use-nesting */
        &:first-child .radio-label {
            /* stylelint-enable csstools/use-nesting */
            border-radius: 2px 0 0 2px;
            border-left: 2px solid $primary-color;
        }

        &:last-child .radio-label {
            border-radius: 0 2px 2px 0;
        }
    }
}

/* yet another backport from chitin */
.radio-group-vertical {
    flex-direction: column;
    &:not(.radio-group-padded) .radio-wrapper {
        .radio-label {
            border-bottom: 0;
        }

        &:first-child {
            .radio-label,
            .radio-addon .button {
                border-radius: 2px 2px 0 0;
            }
        }
        &:last-child {
            .radio-label,
            .radio-addon .button {
                border-radius: 0 0 2px 2px;
                border-bottom: 2px solid $primary-color;
            }
        }

        .radio-addon .button {
            border-bottom: 0;
            border-radius: 0;
        }
    }

    /* stylelint-disable csstools/use-nesting */
    &.radio-group-padded .radio-wrapper {
        /* stylelint-enable csstools/use-nesting */
        margin-bottom: 12px;

        .radio-label {
            border-radius: 2px;
        }

        .radio-addon {
            margin-left: 6px;

            .button {
                border: 2px solid $primary-color;

                padding-left: 13px;
                padding-right: 13px;
            }
        }
    }

    .radio-wrapper {
        display: flex;
        flex-direction: row;
        align-items: stretch;

        .radio-label {
            display: block;
            margin-bottom: 0;
            border-left: 2px solid $primary-color;
            flex-grow: 1;
            min-height: 50px;
            box-sizing: border-box;

            padding-left: 15px;
        }

        .radio-addon {
            .button {
                border-left: 0;
                font-size: 20px;
                height: 100%;
            }
        }
    }
}

/* Checkboxes */

input[type='checkbox'].form-element {
    border: 2px solid $primary-color;
    appearance: none; /* TODO: This is actually a little debatable, since appearance is as of now not supported in every browser (especially IE 11, Edge does though with -webkit- prefix weirdly enough). But it is not breaking, so I think it is ok this way */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px;
    margin: 0;
    margin-right: 10px;
    float: left;
    cursor: auto; // Normalize value for the tests.

    &:checked {
        background: linear-gradient($primary-color, $primary-color) 50% 50% / 16px 16px;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

/* Adapted after: https://www.algolia.com/doc/tutorials/search-ui/autocomplete/auto-complete */
.aa-input-container {
    display: inline-block;
    position: relative;
}
.algolia-autocomplete {
    width: 100%;
}
.aa-input-search,
input[type='search'].aa-input-search {
    padding: 12px 28px 12px 12px;
    width: 100%;
    background-color: $bg-color;
    border: 4px solid $primary-color;
    border-radius: 2px;

    // Fix search input in Webkit/Safari (see https://stackoverflow.com/a/34802612)
    -webkit-appearance: textfield;
    &::-webkit-search-decoration {
        -webkit-appearance: none;
    }
}
.aa-dropdown-menu {
    background-color: $bg-color;
    border: 1px solid color('gray', 300);
    width: 100%;
    box-sizing: border-box;
}
.aa-suggestion {
    position: relative;
    padding: 12px;
    cursor: pointer;
    & + .aa-suggestion {
        border-top: 1px solid color('gray', 300);
    }
    &:last-of-type {
        border-bottom: 1px solid color('gray', 300);
    }
    &:hover,
    &:focus,
    &.aa-cursor {
        background-color: color('blue', 100);
    }
    &.aa-cursor mark {
        background-color: color('gray', 400);
    }

    h4 {
        margin: 0;

        .icon {
            position: relative;
            z-index: 1;
        }
    }

    a {
        margin: -12px;
        padding: 12px;
        width: 100%;
        height: 100%;
        color: $text-color;
        display: inline-block;

        .anchor-overlay {
            position: absolute;
            margin: auto;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }
    }
}

/* InstantSearch */
.ais-SearchBox {
    margin-bottom: 20px;

    input.ais-SearchBox-input {
        border-width: 4px;
        padding: 12px 28px 12px 12px;

        &:required {
            background: unset;
        }
    }
}
.ais-SearchBox-input {
    width: 100%;
    &:focus {
        outline: $primary-color solid 1px;
    }
}
.ais-SearchBox-submit,
.ais-SearchBox-reset {
    display: none;
}

/* InstantSearch and Autocomplete */
.ais-Highlight,
.aa-suggestion {
    & mark {
        background-color: color('blue', 100);
        color: inherit;
    }
}

/* Modal */
/* adapted after: https://jsfiddle.net/developit/2kLkaxvd/ */

.modal {
    position: absolute;
    display: block;

    &.no-animation > .inner,
    &.no-animation > .backdrop {
        animation: none;
    }

    & > .backdrop {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;

        @extend %fade-in;
    }

    & > .inner {
        position: fixed;
        z-index: 999;
        box-sizing: border-box;
        left: 50%;
        top: 50%;
        width: 500px;
        padding: 20px;
        padding-top: 35px;
        transform: translate(-50%, -50%);
        background: $bg-color;
        box-shadow: 0 10px 30px color('gray', 700);
        animation: in 300ms ease forwards 1;
        overflow-y: auto;
        max-height: 95vh;

        @media screen and (prefers-reduced-motion: reduce) {
            animation: none;
        }

        button.close-button {
            color: $primary-color;
            font-size: 8px;
            position: absolute;
            top: 15px;
            right: 20px;
            cursor: pointer;

            &:hover,
            &:focus {
                color: color('blue', 900);
            }
        }

        .button {
            @include mobile {
                width: 100%;
                margin-bottom: 10px;
            }
        }

        @include mobile {
            max-width: 90vw;
        }
    }
}
@keyframes in {
    0% {
        opacity: 0;
        transform: translate(-50%, 0%) scale(0.7);
    }
}

.modal .button-group {
    margin-top: 20px;
}

/* Accordion */

.accordion {
    .accordion-title {
        margin-top: 15px;
        font-size: $font-size;
        font-weight: bold;

        .icon {
            float: right;
        }
    }

    .accordion-title-link {
        color: $text-color;
        width: 100%;
    }
}

/* TextScroll */

.textscroll {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-left: 0;

    @include mobile {
        flex-wrap: wrap;
    }

    li {
        display: block;
        text-align: center;
        flex: 1;
        border-radius: 2px;

        &.active {
            background-color: $primary-color;

            a {
                color: $bg-color;
            }
        }

        a {
            font-size: 20px;
            color: $text-color;
            padding: 5px;
        }
    }
}

/* i18n */
.i18n-button {
    display: block;
    width: 100%;
    text-align: left;
}

.dropup.i18n-widget-container {
    border: 2px solid $primary-color;
    border-radius: 2px;
    background: $bg-color;
    width: 400px;
    left: 0;
    bottom: 100%;
    margin-bottom: -2px;
    padding: 10px;

    @include mobile {
        width: 100%;
    }
}
.i18n-widget {
    .select-container {
        width: 100%;
    }
}

#personal-menu-i18n-widget {
    padding: 15px;
    border-top: 2px solid $primary-color;
}

/* Dropdown and -up */

.dropdown-container,
.dropup-container {
    position: relative;

    &:hover,
    &:focus,
    &:focus-within {
        .dropdown,
        .dropup {
            display: block;
            position: absolute;
            z-index: 998;
        }

        .dropup {
            bottom: 100%;
        }
    }

    &:hover.disabled,
    &:focus.disabled,
    &:focus-within.disabled {
        .dropdown,
        .dropup {
            display: none;
        }
    }

    .dropdown,
    .dropup {
        background-color: $bg-color;
        border: 2px solid $primary-color;
        border-radius: 2px;

        display: none;
    }
}

/* Flash messages */
#flash-messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 350px;
    max-height: 90vh;
    overflow: auto;

    @include mobile {
        width: 100%;
        max-width: 500px;
    }
}

.flash-message {
    /* stylelint-disable scss/at-extend-no-missing-placeholder */
    @extend .box;
    /* stylelint-enable scss/at-extend-no-missing-placeholder */
    background-color: $bg-color;
    position: relative;
    margin-bottom: 10px;
    padding-right: 45px;

    @extend %fade-in;
}

.flash-message,
.hint {
    button.close-button {
        color: $primary-color;
        font-size: 8px;
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
    }
}

.flash-error {
    border-color: $error-color;
    button.close-button {
        color: $error-color;
    }
}
.flash-warning {
    border-color: $warning-color;
    button.close-button {
        color: $warning-color;
    }
}
.flash-info {
    border-color: $info-color;
    button.close-button {
        color: $info-color;
    }
}
.flash-success {
    border-color: $success-color;
    button.close-button {
        color: $success-color;
    }
}

.top-right-humaaan,
.top-left-humaaan {
    height: 350px;
    margin-top: -70px;

    @include mobile {
        display: block;
        margin: auto !important;
        float: none !important;
        width: 80vw;
        height: auto;
    }
}
.top-right-humaaan {
    float: right;
    margin-right: -250px;
}
.top-left-humaaan {
    float: left;
    margin-left: -250px;
}

.offset-image {
    padding: 0 20px;

    @include mobile {
        display: block;
        margin: auto !important;
        float: none !important;
        max-width: 80vw;
        height: auto;
    }

    &.offset-image-left {
        float: left;
        margin-left: -150px;
    }
    &.offset-image-right {
        float: right;
        margin-right: -150px;
    }
}

/* Footnotes, adapted after: https://news.ycombinator.com/item?id=24747376 */
details.footnote {
    display: inline;
    @include desktop {
        position: relative;
    }

    & > summary {
        list-style: none; /* hide details arrow */
        color: #00826c;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }
    }

    & > .footnote-content {
        position: absolute;
        background: color('white');
        border: 1px solid color('gray', 400);
        padding: 1rem;
        min-width: 15rem;
        max-width: 20rem;
        z-index: 2;
        @include mobile {
            transform: translateX(-50%);
            left: 50%;
        }

        p:first-of-type {
            margin-top: 0;
        }
        p:last-of-type {
            margin-bottom: 0;
        }
    }
}

/* Company Result */
.company-result-list {
    margin-left: 0;
    padding-left: 0;
}

.company-result {
    display: flex;
    flex-direction: row;
    padding: 0;
    list-style: none;
    align-items: baseline;

    &:focus,
    &.company-result-focussed {
        outline: 3px solid color('teal', 500);
    }

    &.company-result-clickable {
        cursor: pointer;
    }

    .ais-Highlight mark {
        background-color: transparent;
        font-weight: bold;
    }

    .company-info-icon {
        display: inline-block;
        margin-left: 5px;
        color: $error-color;

        &.icon-check-badge {
            color: color('green', 800);
        }

        &.icon-question-badge {
            color: color('orange', 800);
        }
    }

    h4 {
        display: inline;
        font-size: 16px;

        .ais-Highlight mark {
            font-style: italic;
        }
    }

    &.company-result-active {
        background-color: $primary-color;
        color: $bg-color;

        .company-info-icon {
            color: $bg-color;
        }
    }

    .company-result-action {
        display: block;
        color: $primary-color;
        flex-shrink: 0;
        margin-left: 20px;
    }

    .company-result-content {
        padding: 20px;
        width: 100%;
        flex-grow: 2;
    }
}

.company-suggestion-container {
    width: 100%;
    max-height: 450px;
    overflow: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    margin-top: 15px;

    .company-suggestion-pack {
        border: 2px solid $primary-color;
        border-radius: 2px;
        width: 250px;
        flex-grow: 1;
        position: relative;
        padding-bottom: 55px;

        h1 {
            padding: 10px 42px 10px 10px;
            font-size: 1.2em;
            display: block;
            border-bottom: 2px solid $primary-color;
        }

        span.icon.icon-star {
            position: absolute;
            top: -12px;
            right: 5px;
            font-size: 24pt;
        }

        p {
            margin: 10px;
        }

        button.company-suggestion-pack-cta {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;

            border-radius: 0;
            border-width: 1px;
            border-top-width: 3px;
        }
    }
}

/* Batch Breadcrumbs */
.batch-breadcrumbs {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    align-items: stretch;
    width: 100%;
    list-style: none;
    overflow: hidden;
    padding: 0;

    .batch-breadcrumb {
        flex-grow: 1;
        flex-basis: 0;
        flex-shrink: 1;
        min-width: 0;
        position: relative;
        background-color: color('gray', 400);

        &.batch-breadcrumb-active {
            background-color: $accent_color;
            .batch-breadcrumb-content {
                color: $bg-color;
            }

            &::after {
                background-color: $accent_color;
            }
        }

        &.batch-breadcrumb-sent {
            background-color: $bg-accent-color;

            &::after {
                background-color: $bg-accent-color;
            }
        }

        &::after {
            content: ' ';
            display: block;
            position: absolute;
            left: 100%;
            z-index: 3;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            background-color: color('gray', 400);
            height: 100%;
            width: 25px;
            top: 0;
        }

        &::before {
            content: ' ';
            display: block;
            position: absolute;
            left: 0;
            z-index: 2;
            clip-path: polygon(0 0, 2px 0, 100% 50%, 2px 100%, 0 100%);
            height: 100%;
            width: 27px;
            background-color: $bg-color;
            top: 0;
        }

        &:first-child {
            &::before {
                display: none;
            }

            .batch-breadcrumb-content {
                padding-left: 10px;
            }
        }

        /* This is for either desktop or mobile, of which only one is visible at each time. */
        &:nth-last-child(1).mobile-only,
        &:nth-last-child(2).desktop-only {
            .batch-breadcrumb-content {
                padding-right: 10px;
            }

            &::after {
                display: none;
            }
        }

        .batch-breadcrumb-content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            text-align: center;
            padding: 8px 0 8px 33px;
            color: $text-color;
            text-decoration: none !important;
            font-size: 0.9rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

/* Proceeding Row */
.proceedings-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 15px;
    column-gap: 5px;

    .dropdown-container {
        &:focus > .dropdown,
        &:hover > .dropdown,
        &:focus-within > .dropdown {
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            row-gap: 5px;

            button,
            .button {
                text-align: center;
            }
        }
    }
}

.proceeding-rows {
    padding-left: 0;

    .proceeding-row-list-item {
        list-style: none;
        display: flex;
        align-items: baseline;
        margin-bottom: 10px;
        column-gap: 5px;

        input[type='checkbox'] {
            /* This is a little clunky here because of the way CSS defines baselines. */
            position: relative;
            top: 5px;
        }

        .proceeding-row {
            flex-basis: 100%;

            &[open] {
                summary {
                    border-radius: 2px 2px 0px 0px;

                    & > h1 {
                        &::before {
                            /* stylelint-disable scss/at-extend-no-missing-placeholder */
                            @extend .icon-arrow-down;
                            /* stylelint-enable scss/at-extend-no-missing-placeholder */
                            font-size: 0.9rem !important;
                            vertical-align: -1px !important;
                        }
                    }
                }
            }

            summary {
                list-style: none;
                border: 4px solid $primary-color;
                border-radius: 2px;
                padding: 10px;
                display: flex;
                align-items: baseline;
                justify-content: flex-start;
                column-gap: 5px;

                &::-webkit-details-marker {
                    display: none;
                }

                & > span,
                time {
                    display: block;
                    flex-shrink: 0;
                    flex-grow: 1;
                }

                & > h1 {
                    display: block;
                    flex-grow: 3;
                    flex-basis: 50%;
                    font-size: 18px;

                    &::before {
                        /* stylelint-disable scss/at-extend-no-missing-placeholder */
                        @extend .icon-arrow-right;
                        /* stylelint-enable scss/at-extend-no-missing-placeholder */
                        font-size: 0.9rem !important;
                        vertical-align: -1px !important;
                        margin-right: 3px;
                    }

                    span {
                        font-size: 1.1rem;
                    }
                }

                @include mobile {
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    & > h1 {
                        width: 100%;
                        flex-basis: 100%;
                        flex-grow: unset;
                    }

                    & > span,
                    time {
                        flex-grow: unset;
                    }
                }
            }

            .proceeding-date {
                text-align: left;
                &.proceeding-date-overdue {
                    color: color('red', 800);
                }
            }
            .proceeding-status {
                width: auto;
                flex-basis: content;
            }

            .proceeding-reference {
                text-align: right;
            }

            .proceeding-message {
                border: 2px solid $primary-color;
                border-top: 0;
                padding: 10px;
                list-style: none;

                display: flex;
                flex-direction: row;
                align-items: center;
                column-gap: 5px;

                h2 {
                    display: inline;
                    margin-left: 5px;
                    font-size: 16px;
                }

                .icon::before {
                    margin-right: 8px;
                }
            }

            .proceeding-actions {
                border: 2px solid $primary-color;
                border-top: 0;
                border-radius: 0 0 2px 2px;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                column-gap: 10px;
            }
        }
    }
}

/* Badge */

.badge {
    background-color: color('gray', 300);
    color: ('gray', 800);
    padding: 3px 7px;
    border-radius: 1rem;
    text-align: center;
}

.badge-success {
    background-color: color('green', 300);
    color: color('green', 900);
}
.badge-warning {
    background-color: color('orange', 300);
    color: color('orange', 900);
}
.badge-error {
    background-color: color('red', 300);
    color: color('red', 900);
}

/* ReinderWidget */

#home-reminders {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 55px;
}

.reminder-widget {
    width: 100%;
    display: block;
    border-radius: 5px;
    padding: 0;
    border: 4px solid $primary-color;
    box-sizing: border-box;

    summary {
        background-color: $primary-color;
        color: $bg-color;
        padding: 10px;
    }

    .reminder-widget-content {
        background-color: $bg-color;
        max-height: 300px;
        overflow-y: scroll;

        ul {
            margin: 0;
            padding: 0;

            li {
                list-style: none;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                column-gap: 10px;
                align-items: center;
                padding: 5px;

                @include mobile {
                    flex-wrap: wrap;
                }

                &:nth-child(2n) {
                    background-color: $bg-accent-color;
                }

                .button {
                    &.icon {
                        &::before {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }

    .reminder-widget-bottom-link {
        background-color: $primary-color;
        color: $bg-color;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
}
