.checkbox{align-items:center;cursor:pointer;display:flex;outline:none}.checkbox .tick-mark-box{display:flex;margin-left:-14px;padding:14px}.checkbox .tick-mark-box input[type=checkbox]{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.checkbox .tick-mark-box input[type=checkbox]:focus-visible+.checkmark{box-shadow:0 0 0 2px var(--primary-color)}.checkbox .tick-mark-box .checkmark{border:1px solid var(--border-color);border-radius:6px;box-sizing:border-box;flex-shrink:0;height:20px;max-height:20px;max-width:20px;min-height:20px;min-width:20px;position:relative;width:20px}.checkbox .tick-mark-box .checkmark:after{border:solid var(--contrast-color);border-radius:1px;border-width:0 2px 2px 0;content:"";display:none;height:12px;left:6px;position:absolute;top:1px;transform:rotate(45deg);width:6px}.checkbox .tick-mark-box .checkmark.checked{background:var(--primary-color);border:none}.checkbox .tick-mark-box .checkmark.checked:after{display:block}.checkbox:focus .checkmark{box-shadow:0 0 0 1px var(--primary-color)}.checkbox:hover .checkmark{border-color:var(--hover-color)}.checkbox:hover .checkmark.checked{background-color:var(--hover-color)}.checkbox:active .checkmark{border-color:var(--active-color)}.checkbox:active .checkmark.checked{background:var(--active-color)}.checkbox.disabled{color:var(--border-color)}.checkbox.disabled:hover .checkmark.checked{background:var(--disabled-color)}.checkbox.disabled .checkmark{border-color:var(--disabled-color);box-shadow:none}.checkbox.disabled .checkmark.checked{background:var(--disabled-color)}