.container {
    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
    border-radius: var(--mantine-radius-md);
    border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
    padding: rem(8px) rem(5px);

    @mixin dark {
        @mixin hover {
            border: rem(1px) solid var(--mantine-color-dark-4);
        }
    }
}

.timer {
    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
    border-radius: var(--mantine-radius-xl);
    padding: rem(8px);

    @mixin light {
        border: rem(1px) solid var(--mantine-color-gray-3);
    }
}

.input {
    width: 70px;

    input {
        font-size: rem(18px);
        font-weight: 600;
        text-align: center;
    }

    &.invalid input {
        color: var(--mantine-color-red-6) !important;
    }
}

.list {
    padding: 0 rem(10px);

    a {
        text-decoration: none;
        color: var(--mantine-color-dimmed);

        @mixin hover {
            color: var(--mantine-color-blue-4);
        }
    }

    .row {
        @mixin hover {
            .delete {
                display: block;
            }
        }
    }

    .delete {
        display: none;
        width: rem(13);
        height: rem(13);
        color: var(--mantine-color-red-6);
        cursor: pointer;
    }
}

.summary {
    letter-spacing: 2px;
    padding: 0 rem(10px);
}

.blink {
    animation: blinkAnimation ease 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes blinkAnimation {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}
