.valet-checklist-checkbox-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.valet-checklist-checkbox-item label {
    margin-bottom: 3px;
}

.valet-checklist-checkbox-children {
    margin-left: 20px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.valet-checklist-checkbox-children.show {
    max-height: 1000px;
    opacity: 1;
}

.valet-checklist-checkbox-item .valet-checklist-checkbox-input {
    position: relative;
    width: 1em;
    height: 1em;
    padding: 0;
    color: #000;
    border: 1px solid gray;
    border-radius: 3px;
    appearance: none;
    outline: 0;
    cursor: pointer;
    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
}

.valet-checklist-checkbox-item .valet-checklist-checkbox-input::before {
    position: absolute;
    content: '';
    display: block;
    top: 1px;
    left: 5px;
    width: 6px;
    height: 12px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.valet-checklist-checkbox-item .valet-checklist-checkbox-input:checked {
    color: #fff;
    border-color: green;
    background: green;
}

.valet-checklist-checkbox-item .valet-checklist-checkbox-input:checked::before {
    opacity: 1;
}

.valet-checklist-checkbox-item .valet-checklist-checkbox-input:checked ~ label {
    color: grey;
}

.valet-checklist-checkbox-item .valet-checklist-checkbox-input:checked ~ label::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.valet-checklist-checkbox-item label {
    position: relative;
    cursor: pointer;
    font-size: 1em;
    padding: 0 0.25em 0;
    color: #000;
    transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.valet-checklist-checkbox-item label::before {
    position: absolute;
    content: attr(data-content);
    width: calc(100% - 8px);
    top: 12px;
    height: 2px;
    background: #000;
    clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
    transition: clip-path 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.valet-checklist__title {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 20px;
}