.dow-list {
    display: grid;
    gap: var(--space-xs)
}

.dow-list__item {
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-ring), var(--shadow-xs);
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs)
}

@media (min-width: 32rem) {
    .dow-list__item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
}

.dow-list__title {
    font-size: var(--text-unit);
    font-weight: 600;
    line-height: 1;
    margin-bottom: var(--space-xxs)
}

.dow-list__title .dow-list__title-link {
    color: var(--color-contrast-high);
}
.dow-list__title .dow-list__title-link:hover {
    /*text-decoration: underline var(--color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;*/
    color: var(--color-primary);
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--color-primary-lighter), var(--color-primary-darker));
    background-size: 100% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 1px;
}

.dow-list__metadata-list {
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-contrast-medium);
    line-height: 1
}

.dow-list__metadata-list>* {
    display: flex;
    align-items: center
}

.dow-list__metadata-list>*:not(:last-child)::after {
    /* dot separator */
    content: "";
    display: block;
    flex-shrink: 0;
    --size: 5px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: currentColor;
    margin: 0 var(--space-xs);
    opacity: 0.5
}

/* animated button */
.dow-list__btn {
    --hover-transition-duration: .3s;
    overflow: hidden
}

.dow-list__btn:hover .dow-list__btn-label,
.dow-list__btn.dow-list__btn--is-loading .dow-list__btn-label {
    transform: scale(0.5);
    opacity: 0
}

.dow-list__btn:hover .dow-list__icon-wrapper,
.dow-list__btn.dow-list__btn--is-loading .dow-list__icon-wrapper {
    transform: translateY(0)
}

.dow-list__btn--reset .dow-list__btn-label,
.dow-list__btn--reset:hover .dow-list__btn-label {
    transform: scale(1);
    opacity: 1
}

.dow-list__btn--reset .dow-list__icon-wrapper,
.dow-list__btn--reset:hover .dow-list__icon-wrapper {
    transform: translateY(100%)
}

.dow-list__btn--reset .dow-list__icon-group *,
.dow-list__btn--reset:hover .dow-list__icon-group * {
    transition: none !important;
    animation: none !important
}

.dow-list__btn-label {
    transition: opacity var(--hover-transition-duration), transform var(--hover-transition-duration)
}

.dow-list__icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: transform var(--hover-transition-duration)
}

.dow-list__icon {
    --size: 20px;
    display: block;
    width: 20px;
    height: 20px
}

.dow-list__icon .dow-list__icon-group>*:nth-child(1) {
    /* arrow main leg */
    stroke-dashoffset: 0;
    stroke-dasharray: 16;
    transition: stroke-dashoffset 0.4s 0.3s var(--ease-in)
}

.dow-list__icon .dow-list__icon-group>*:nth-child(2),
.dow-list__icon .dow-list__icon-group *:nth-child(3) {
    /* arrow smaller legs */
    opacity: 1;
    transform: rotate(0);
    transition: transform 0.3s var(--ease-out), opacity 0s 0.3s
}

.dow-list__icon .dow-list__icon-group>*:nth-child(4) {
    /* loading circle */
    stroke-dashoffset: 50;
    stroke-dasharray: 50
}

.dow-list__icon .dow-list__icon-group>*:nth-child(5) {
    /* checkmark final loading circle */
    stroke-dashoffset: 38;
    stroke-dasharray: 38;
    transition: stroke-dashoffset 0.7s
}

.dow-list__icon .dow-list__icon-group>*:nth-child(6) {
    /* checkmark */
    stroke-dashoffset: 24;
    stroke-dasharray: 24;
    transition: stroke-dashoffset 0.5s 0.2s var(--ease-out)
}

.dow-list__icon .dow-list__icon-group>*:nth-child(7) {
    /* exclamation point final loading circle */
    stroke-dashoffset: 25;
    stroke-dasharray: 25;
    transition: stroke-dashoffset 0.45s
}

.dow-list__icon .dow-list__icon-group>*:nth-child(8) {
    /* exclamation point leg */
    stroke-dashoffset: 10;
    stroke-dasharray: 10;
    transition: stroke-dashoffset 0.3s 0.2s var(--ease-out)
}

.dow-list__icon .dow-list__icon-group>*:nth-child(9) {
    /* exclamation point dot */
    transform-origin: 10px 17.5px;
    transform: scale(0);
    transition: transform 0.3s 0.5s var(--ease-out-back)
}

.dow-list__btn--is-loading .dow-list__icon-group>*:nth-child(1) {
    stroke-dashoffset: 16
}

.dow-list__btn--is-loading .dow-list__icon-group>*:nth-child(2),
.dow-list__btn--is-loading .dow-list__icon-group *:nth-child(3) {
    opacity: 0;
    transform-origin: 10px 18px
}

.dow-list__btn--is-loading .dow-list__icon-group>*:nth-child(2) {
    transform: rotate(45deg)
}

.dow-list__btn--is-loading .dow-list__icon-group>*:nth-child(3) {
    transform: rotate(-45deg)
}

.dow-list__btn--is-loading .dow-list__icon-group>*:nth-child(4) {
    animation: dow-list-obj-4-anim 1s 0.6s infinite
}

@media not all and (pointer: fine) {

    /* user hasn't pointing device (e.g., touch device) */
    .dow-list__icon .dow-list__icon-group {
        /* hide arrow icon */
    }

    .dow-list__icon .dow-list__icon-group>*:nth-child(1),
    .dow-list__icon .dow-list__icon-group>*:nth-child(2),
    .dow-list__icon .dow-list__icon-group>*:nth-child(3) {
        display: none
    }

    .dow-list__btn--is-loading .dow-list__icon-group>*:nth-child(4) {
        animation-delay: 0s
    }

    .dow-list__btn:hover .dow-list__btn-label {
        /* keep btn label visible */
        transform: scale(1);
        opacity: 1
    }

    .dow-list__btn.dow-list__btn--is-loading .dow-list__btn-label {
        opacity: 0
    }
}

@keyframes dow-list-obj-4-anim {
    from {
        stroke-dashoffset: 50
    }

    to {
        stroke-dashoffset: 150
    }
}

.dow-list__btn--success .dow-list__icon-group>*:nth-child(4) {
    display: none
        /* hide loading circle */
}

.dow-list__btn--success .dow-list__icon-group>*:nth-child(5) {
    stroke-dashoffset: 114
}

.dow-list__btn--success .dow-list__icon-group>*:nth-child(6) {
    stroke-dashoffset: 0
}

.dow-list__btn--error {
    animation: dow-list-btn-error-anim 0.4s 0.5s
}

.dow-list__btn--error .dow-list__icon-group>*:nth-child(4) {
    display: none
        /* hide loading circle */
}

.dow-list__btn--error .dow-list__icon-group>*:nth-child(7) {
    stroke-dashoffset: 75
}

.dow-list__btn--error .dow-list__icon-group>*:nth-child(8) {
    stroke-dashoffset: 0
}

.dow-list__btn--error .dow-list__icon-group>*:nth-child(9) {
    transform: scale(1)
}

@keyframes dow-list-btn-error-anim {

    0%,
    100% {
        transform: translateX(0)
    }

    20%,
    60% {
        transform: translateX(4px)
    }

    40%,
    80% {
        transform: translateX(-4px)
    }
}