.top-tasks-list {
    --column-gap: 0.5rem;
    --row-gap: 0.5rem;
    --minimum-row-height__minimum-width-30-rem: 11rem;
}


@media (min-width: 30rem) {
    .top-tasks-list {
        --row-gap: 0.5rem;
    }
}

.top-tasks-list {
    display: grid;
    grid-template-columns: 1fr;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 30rem) {
    .top-tasks-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-tasks-list[data-amount="1"] {
        grid-template-columns: 1fr;
        width: 50%;
    }
}

@media (min-width: 48rem) {
    .top-tasks-list[data-amount="1"] {
        grid-template-columns: 1fr;
    }

    .top-tasks-list[data-amount="2"],
    .top-tasks-list[data-amount="3"],
    .top-tasks-list[data-amount="4"],
    .top-tasks-list[data-maximum-columns="2"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="2"][data-amount="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="3"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="6"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="3"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"]
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="7"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="8"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .top-tasks-list[data-maximum-columns="3"][data-amount="3"]:not([data-direction="horizontal"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.top-tasks-list {
    grid-column-gap: var(--column-gap, 1rem);
    grid-row-gap: var(--row-gap, 1rem);
}

@media (min-width: 30rem) {
    .top-tasks-list {
        grid-auto-rows: minmax(var(--minimum-row-height__minimum-width-30-rem, 11rem), auto);
    }

    .top-tasks-list[data-amount="1"] {
        width: calc((100% - var(--column-gap, 1rem)) / 2);
    }
}

@media (min-width: 48rem) {
    .top-tasks-list[data-maximum-columns="2"][data-amount="1"] {
        width: calc((100% - (1 * var(--column-gap, 1rem))) / 2);
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="1"] {
        width: calc((100% - (2 * var(--column-gap, 1rem))) / 3);
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="1"] {
        width: calc((100% - (3 * var(--column-gap, 1rem))) / 4);
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="2"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="4"] {
        width: calc((((100% - (2 * var(--column-gap, 1rem))) / 3) * 2) + var(--column-gap, 1rem));
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="2"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="3"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="4"] {
        width: calc((((100% - (3 * var(--column-gap, 1rem))) / 4) * 2) + var(--column-gap, 1rem));
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="3"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"] {
        width: calc((((100% - (3 * var(--column-gap, 1rem))) / 4) * 3) + (2 * var(--column-gap, 1rem)));
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"][data-direction="horizontal"] {
        width: 100%;
    }
}

@media (min-width: 62rem) {
    .top-tasks-list[data-maximum-columns="3"][data-amount="3"] {
        width: calc((((100% - (2 * var(--column-gap, 1rem))) / 3) * 2) + var(--column-gap, 1rem));
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="3"][data-direction="horizontal"] {
        width: 100%;
    }
}

/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_linkhandling/Partials/Button/OpenGemeentenLinkHandling-Button.css
 *
 * Variables can be set there globally or override them here!
 */

.top-tasks-tile {
    --box-shadow: none;
    --font-size: var(--root-font-size); /* Reset, use REM */
    --padding: var(--root-tile-padding);
}

/* Normal */
.top-tasks-tile--normal {
    --background-color: var(--root-color--secondary);
    --border-width: 0.125rem;
    --border-style: solid;
    --border-color: transparent;
    --flex-direction: row;  /* Use "column" for icon on top, "row" for left */
}

.top-tasks-tile--normal:focus,
.top-tasks-tile--normal:hover {
    --background-color: var(--root-color--secondary-dark);
    /*--border-color: var(--root-color--primary-dark);*/
}

.top-tasks-tile--normal .top-tasks-tile__icon {
    --color: var(--root-color--white);
    --height: 2.667em;
    --width: 2.667em;
    --margin: 0 0.5rem 0 0;
}

.top-tasks-tile--normal .top-tasks-tile__header {
    --color: var(--root-color--white);
    --font-family: var(--root-heading-4-family);
    --font-size: var(--root-heading-4-size);
    --font-style: var(--root-heading-4-style);
    --font-weight: var(--root-font-weight--semi-bold);
    --line-height: var(--root-heading-4-line-height);
    --margin: 0 0 0.5rem;
}

.top-tasks-tile--normal .top-tasks-tile__header .icon {
    --fill: currentColor;
    --height: 1em;
}

.top-tasks-tile--normal .top-tasks-tile__description {
    --color: var(--root-color--white);
    --font-size: 0.889em;
    --font-family: inherit;
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

/* Special */
.top-tasks-tile--special {
    --background-color: var(--root-color--primary);
    --border-width: 0.125rem;
    --border-style: solid;
    --border-color: transparent;
    --flex-direction: row;  /* Use "column" for icon on top, "row" for left */
}

.top-tasks-tile--special:focus,
.top-tasks-tile--special:hover {
    --background-color: var(--root-color--primary-dark);
    /*--border-color: var(--root-color--secondary-dark);*/
}

.top-tasks-tile--special .top-tasks-tile__icon {
    --color: var(--root-color--white);
    --height: 2.667em;
    --width: 2.667em;
    --margin: 0 0.5rem 0 0;
}

.top-tasks-tile--special .top-tasks-tile__header {
    --color: var(--root-color--white);
    --font-family: var(--root-heading-4-family);
    --font-size: var(--root-heading-4-size);
    --font-style: var(--root-heading-4-style);
    --font-weight: var(--root-heading-4-weight);
    --line-height: var(--root-heading-4-line-height);
    --margin: 0 0 0.5rem;
}

.top-tasks-tile--special .top-tasks-tile__header .icon {
    --fill: currentColor;
    --height: 1em;
}

.top-tasks-tile--special .top-tasks-tile__description {
    --color: var(--root-color--white);
    --font-size: 0.889em;
    --font-family: inherit;
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

/* Dynamic */
.top-tasks-tile--dynamic {
    --background-color: var(--root-color--contrast);
    --border-width: 0.063rem;
    --border-style: solid;
    --border-color: transparent;
}

.top-tasks-tile--dynamic .top-tasks-tile__header {
    --color: var(--root-color--white);
    --font-family: var(--root-heading-4-family);
    --font-size: var(--root-heading-4-size);
    --font-style: var(--root-heading-4-style);
    --font-weight: var(--root-heading-4-weight);
    --line-height: var(--root-heading-4-line-height);
    --margin: 0 0 0.5rem;
}

.top-tasks-tile--dynamic .top-tasks-tile__description {
    --color: var(--root-color--white);
    --font-size: 0.889em;
    --font-family: inherit;
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.top-tasks-tile--dynamic .top-tasks-tile__content {
    --color: var(--root-color--white);
    --font-size: 0.875em;
    --font-family: inherit;
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.top-tasks-tile--dynamic .top-tasks-tile__anchor {
    --background-color: var(--root-color--white);
    --border-width: 0.063rem;
    --border-style: solid;
    --border-color: transparent;
    --color: var(--root-color--contrast);
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-family: inherit;
    --font-style: normal;
    --font-weight: var(--root-font-weight--bold);
    --line-height: inherit;
    --padding: 0.5rem;
    --text-decoration: none;
}

.top-tasks-tile--dynamic .top-tasks-tile__anchor:focus,
.top-tasks-tile--dynamic .top-tasks-tile__anchor:hover {
    --background-color: var(--root-color--white-dark);
    /*--text-decoration: underline;*/
}

.top-tasks-tile--dynamic .top-tasks-tile__anchor .icon {
    --fill: currentColor;
    --height: 1em;
}

@media (min-width: 30rem) {
    .top-tasks-tile--normal {
        --flex-direction: column;
    }

    .top-tasks-tile--normal .top-tasks-tile__icon {
        --height: 2.667em;
        --width: 2.667em;
        --margin: 0;
    }

    .top-tasks-tile--special {
        --flex-direction: column;
    }

    .top-tasks-tile--special .top-tasks-tile__icon {
        --height: 2.667em;
        --width: 2.667em;
        --margin: 0;
    }
}

.top-tasks-tile {
    display: flex;
    position: relative;
}

.top-tasks-tile__link {
    text-decoration: none;
}

.top-tasks-tile__link:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-tasks-tile__icon {
    pointer-events: none;
}

.top-tasks-tile__header {
    display: block;
}

.top-tasks-tile__header .icon--after {
    margin-left: 0.25rem;
}

.top-tasks-tile__description {
    margin-top: 0.25rem;
}

.top-tasks-tile_row-column-content {
    align-self: center;
}

.top-tasks-tile > *:first-child,
.top-tasks-tile_row-column-content > *:first-child {
    margin-top: 0;
}

.top-tasks-tile--dynamic {
    display: block;
    overflow: hidden;
}

.top-tasks-tile--dynamic .top-tasks-tile__body :first-child {
    margin-top: 0;
}

.top-tasks-tile--dynamic .top-tasks-tile__anchor {
    display: inline-block;
    margin-top: 1rem;
}

.top-tasks-tile--dynamic .top-tasks-tile__anchor .icon--after {
    margin-left: 0.25rem;
}

.top-tasks-tile--dynamic .top-tasks-tile__image {
    display: block;
    width: auto;
    height: 100%;
}

@media (min-width: 30rem) {
    .top-tasks-tile_row-column-content {
        align-self: flex-start;
    }
}

.top-tasks-tile {
    box-shadow: var(--box-shadow, 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16));
    font-size: var(--font-size, 1rem); /* Reset, use REM */
}

.top-tasks-tile__link-icon {
    height: var(--height, 1em);
    width: var(--width, 1em);
    right: var(--padding, 1rem);
    bottom: var(--padding, 1rem);
    fill: var(--fill, #0349D1);
}

/* Normal */
.top-tasks-tile--normal {
    background-color: var(--background-color, white);
    border-width: var(--border-width, 0.063rem);
    border-style: var(--border-style, solid);
    border-color: var(--border-color, #000714);
    flex-direction: var(--flex-direction, column);
    padding: var(--padding, 1rem);
}

.top-tasks-tile--normal .top-tasks-tile__icon {
    height: var(--height, 3em);
    margin: var(--margin, 0 0.5rem 0.5rem 0);
    width: var(--width, 3em);
}

.top-tasks-tile--normal .top-tasks-tile__icon {
    fill: var(--color, #0349D1);
}

.top-tasks-tile--normal .top-tasks-tile__header {
    color: var(--color, #000714);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.125em);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.top-tasks-tile__header .icon {
    height: var(--height, 1em);
    fill: var(--fill, currentColor);
}

.top-tasks-tile--normal .top-tasks-tile__description {
    color: var(--color, #000714);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.889em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

/* Special */
.top-tasks-tile--special {
    background-color: var(--background-color, #AFC9FE);
    border-width: var(--border-width, 0.063rem);
    border-style: var(--border-style, solid);
    border-color: var(--border-color, white);
    flex-direction: var(--flex-direction, column);
    padding: var(--padding, 1rem);
}

.top-tasks-tile--special .top-tasks-tile__icon {
    height: var(--height, 3em);
    margin: var(--margin, 0 0.5rem 0.5rem 0);
    width: var(--width, 3em);
}
.top-tasks-tile--special .top-tasks-tile__icon {
    fill: var(--color, #0349D1);
}

.top-tasks-tile--special .top-tasks-tile__header {
    color: var(--color, #000714);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.125em);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.top-tasks-tile--special .top-tasks-tile__description {
    color: var(--color, #000714);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.889em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

/* Dynamic */
.top-tasks-tile--dynamic {
    background-color: var(--background-color, #022979);
    border-width: var(--border-width, 0.063rem);
    border-style: var(--border-style, solid);
    border-color: var(--border-color, white);
}

.top-tasks-tile--dynamic .top-tasks-tile__body {
    padding: var(--padding, 1rem);
}

.top-tasks-tile--dynamic .top-tasks-tile__header {
    color: var(--color, #fff);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.125em);
    font-weight: var(--font-weight, bold);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.top-tasks-tile--dynamic .top-tasks-tile__description {
    color: var(--color, #fff);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.889em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.top-tasks-tile--dynamic .top-tasks-tile__content {
    color: var(--color, #fff);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.875em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.top-tasks-tile--dynamic .top-tasks-tile__anchor {
    background-color: var(--background-color, #4A86FC);
    border-width: var(--border-width, 0.063rem);
    border-style: var(--border-style, solid);
    border-color: var(--border-color, white);
    color: var(--color, white);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-weight: var(--font-weight, 600);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
    padding: var(--padding, 0.5rem);
    text-decoration: var(--text-decoration, none);
}

.top-tasks-tile--dynamic .top-tasks-tile__anchor .icon {
    height: var(--height, 1em);
    fill: var(--fill, currentColor);
}