.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);
}