.checkbox-control {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 0;
}

.checkbox-control__label {
    font-size: 1rem;
    position: relative;
    color: var(--greyColor10);
    width: 100%;
    margin-bottom: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    height: 3.5rem;
    padding-left: 3rem;
    white-space: pre-wrap;
    cursor: pointer;
}

.checkbox-control__label.checkbox-control__label--html {
    white-space: normal;
}

.checkbox-control__label:is(:focus, :hover)::after {
    background-color: var(--secondaryColor);
    background-color: color-mix(in srgb, var(--secondaryColor), #FFFFFF 60%);
}

.checkbox-control__hint {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--greyColor30);
    padding-left: 3rem;
    margin-top: -1rem;
}

.checkbox-control__label::before,
.checkbox-control__label::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 1.25rem;
}

.checkbox-control__label::before {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1px;
    background-color: #FFFFFF;
    border: 1px solid var(--greyColor30);
    margin-top: -.75rem;
    margin-left: -.75rem;
    z-index: 5;
}

.checkbox-control__label::after {
    width: .875rem;
    height: .875rem;
    margin-top: -.4375rem;
    margin-left: -.4375rem;
    z-index: 15;
}

.checkbox-control__amount {
    position: absolute;
    right: .5rem;
    color: var(--greyColor30);
}

.checkbox-control__control:checked ~ .checkbox-control__label::before {
    border-color: var(--greyColor20);
}

.checkbox-control__control:checked ~ .checkbox-control__label::after {
    background-color: var(--secondaryColor);
}

.checkbox-control__hint {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--greyColor30);
    padding-left: 3rem;
    margin-top: -1rem;
    margin-bottom: 1rem;
}

.checkbox-control--checkmark .checkbox-control__label {
    opacity: .5;
}

.checkbox-control--checkmark .checkbox-control__label::before {
    height: 1.5rem;
    width: 1rem;
    border: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.checkbox-control--checkmark .checkbox-control__label::after {
    display: none;
}

.checkbox-control--checkmark .checkbox-control__control:checked ~ .checkbox-control__label {
    opacity: 1;
    background-color: transparent;
    color: var(--greyColor10);
}

.checkbox-control--checkmark .checkbox-control__control:checked ~ .checkbox-control__label::before {
    background-color: transparent;
    background-image: url("/frontend/assets/Shared/Component/CheckboxControl/Images/Checkmark/Check-e6040fcac1.svg");
}

.checkbox-control--checkmark .checkbox-control__control:checked ~ .checkbox-control__label::after {
    display: none;
}

.checkbox-control.checkbox-control--clearable {
    display: flex;
    background-color: transparent;
    background-color: rgb(from var(--secondaryColorLight) r g b / 50%);
    border-radius: var(--borderRadius);
}

.checkbox-control--clearable .checkbox-control__clear-button {
    display: inline-block;
    margin: 0 .5rem;
    height: 0;
    width: 1.5rem;
    padding: 1.5rem 0 0 0;
    flex: 0 0 1.5rem;
    overflow: hidden;
    align-self: center;
    background: transparent url("/frontend/assets/Shared/Component/CheckboxControl/Images/Clearable/Clear-3e58d68ebb.svg") no-repeat;
    background-position: center;
    background-size: 1rem;
    cursor: pointer;
    border: none;
}

.checkbox-control--clearable .checkbox-control__clear-button ~ .checkbox-control__label {
    padding-left: 0;
    cursor: default;
}

.checkbox-control--clearable .checkbox-control__clear-button ~ .checkbox-control__label:is(:before, :after) {
    display: none;
}

.checkbox-control--clearable.checkbox-control--search-filter .checkbox-control__clear-button {
    margin-right: 1rem;
}

.checkbox-control--clearable .checkbox-control__control:checked ~ .checkbox-control__label {
    background-color: transparent;
}

.checkbox-control--disabled .checkbox-control__label {
    opacity: 0.5;
    cursor: default;
}

.checkbox-control--disabled .checkbox-control__label:is(:hover, :focus)::after {
    background-color: transparent;
}

.checkbox-control--error .checkbox-control__label {
    color: var(--redColor);
}

.checkbox-control--error .checkbox-control__label::before {
    border-color: var(--redColor);
}

.checkbox-control--error .checkbox-control__errors {
    display: none;
}

.checkbox-control.checkbox-control--temporary-rental-period-filter {
    margin-bottom: 1rem;
}

.checkbox-control--toggle .checkbox-control__label {
    font-size: 1rem;
    line-height: 2;
    padding-left: 0;
    padding-right: 5.25rem;
    height: auto;
}

.checkbox-control--toggle .checkbox-control__label::before {
    width: 3.25rem;
    height: 2rem;
    border-radius: 1rem;
    background-color: var(--greyColor50);
    border: 0;
    top: 50%;
    left: auto;
    right: 0;
    margin-top: -1rem;
    z-index: 5;
    transition: all linear 0.125s;
}

.checkbox-control--toggle .checkbox-control__label::after {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: #FFFFFF;
    top: 50%;
    left: auto;
    right: 1.5rem;
    margin-top: -.75rem;
    z-index: 15;
    transition: all linear 0.125s;
    cursor: pointer;
}

.checkbox-control--toggle .checkbox-control__label:is(:focus, :hover)::after {
    background-color: #FFFFFF;
}

.checkbox-control--toggle .checkbox-control__control:checked ~ .checkbox-control__label {
    background-color: transparent;
}

.checkbox-control--toggle .checkbox-control__control:checked ~ .checkbox-control__label::before {
    background-color: var(--secondaryColorDark);
}

.checkbox-control--toggle .checkbox-control__control:checked ~ .checkbox-control__label::after {
    right: .25rem;
    background-color: #FFFFFF;
}

.checkbox-control.checkbox-control--remember-me {
    width: fit-content;
}

.checkbox-control--remember-me .checkbox-control__label {
    height: auto;
    padding-left: 2.25rem;
}

.checkbox-control--remember-me .checkbox-control__label::before {
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.625rem;
    margin-left: 0;
}

.checkbox-control--remember-me .checkbox-control__label::after {
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -0.375rem;
    left: .25rem;
    margin-left: 0;
}

.checkbox-control.checkbox-control--search-filter {
    width: calc(100% + 1rem);
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.checkbox-control--search-filter:not(.checkbox-control--clearable) .checkbox-control__control:checked ~ .checkbox-control__label {
    background-color: var(--secondaryColorLight);
    background-color: rgb(from var(--secondaryColorLight) r g b / 50%);
}

.checkbox-control--search-filter .checkbox-control__label {
    padding-left: 3rem;
    padding-right: 1.5rem;
    height: 2.75rem;
}

.checkbox-control--search-filter .checkbox-control__label::before {
    left: 1rem;
    margin-left: 0;
}

.checkbox-control--search-filter .checkbox-control__label::after {
    left: 1.3125rem;
    margin-left: 0;
}

.checkbox-control--search-filter .checkbox-control__amount {
    right: 1rem;
}