.container {
    --border-color: #ffad16;
    --background-color: #ffad16;

    display: flex;
    align-items: center;
    gap: 6px;
}

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: relative;
    box-shadow: var(--border-color) 0px 0px 0px 2px;
    height: 18px;
    width: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: -1px;
    transition: all 0.2s ease 0s;
    cursor: pointer;
    transform-origin: 0px 10px;
    border-radius: 4px;
    margin: -1px 10px 0px 0px;
    padding: 0px;
    box-sizing: border-box;
    border-radius: 50%;
}

.container input:checked ~ .checkmark {
    box-shadow: var(--border-color) 0px 0px 0px 2px;
    background-color: var(--background-color);
    height: 18px;
    width: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: -1px;
    transition: all 0.2s ease 0s;
    cursor: pointer;
    transform-origin: 0px 10px;
    margin: -1px 10px 0px 0px;
    padding: 0px;
    box-sizing: border-box;
    border-radius: 50%;
}

.checkmark:after {
    content: '';
    position: absolute;
    display: none;
}

.container input:checked ~ .checkmark:after {
    display: block;
}

.container .checkmark:after {
    left: 6px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    transition: all 500ms ease-in-out;
}

.label {
    font-size: 16px;
}
