@amsterdam/design-system-css/dist/checkbox/checkbox.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

.ams-checkbox__input{appearance:none;inline-size:0;margin-block:0;margin-inline:0}.ams-checkbox__input:focus+label{outline:auto}.ams-checkbox__input:focus:not(:focus-visible)+label{outline:0}.ams-checkbox__label{color:var(--ams-checkbox-color);cursor:var(--ams-checkbox-cursor);display:inline-flex;font-family:var(--ams-checkbox-font-family);font-size:var(--ams-checkbox-font-size);font-weight:var(--ams-checkbox-font-weight);gap:var(--ams-checkbox-gap);line-height:var(--ams-checkbox-line-height);outline-offset:var(--ams-checkbox-outline-offset);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-checkbox__icon-container{block-size:var(--ams-checkbox-icon-container-block-size);display:flex;flex:none;inline-size:var(--ams-checkbox-icon-container-inline-size)}.ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-fill);stroke:var(--ams-checkbox-rectangle-stroke)}.ams-checkbox__hover-indicator{stroke:none}.ams-checkbox__checked-indicator{display:none;stroke:var(--ams-checkbox-checked-indicator-stroke)}.ams-checkbox__indeterminate-indicator{display:none;stroke:var(--ams-checkbox-indeterminate-indicator-stroke)}.ams-checkbox__label:hover{color:var(--ams-checkbox-hover-color);text-decoration-line:underline;text-decoration-thickness:var(--ams-checkbox-hover-text-decoration-thickness);text-underline-offset:.375rem}.ams-checkbox__label:hover .ams-checkbox__rectangle{stroke:var(--ams-checkbox-rectangle-hover-stroke)}.ams-checkbox__label:hover .ams-checkbox__hover-indicator{stroke:var(--ams-checkbox-hover-indicator-hover-stroke)}.ams-checkbox__input[aria-invalid=true]+.ams-checkbox__label .ams-checkbox__rectangle{stroke:var(--ams-checkbox-rectangle-invalid-stroke)}.ams-checkbox__input:indeterminate+.ams-checkbox__label .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-indeterminate-fill)}.ams-checkbox__input:indeterminate+.ams-checkbox__label .ams-checkbox__indeterminate-indicator{display:block}.ams-checkbox__input:disabled+.ams-checkbox__label{color:var(--ams-checkbox-disabled-color);cursor:var(--ams-checkbox-disabled-cursor)}.ams-checkbox__input:disabled+.ams-checkbox__label .ams-checkbox__rectangle{stroke:var(--ams-checkbox-rectangle-disabled-stroke)}.ams-checkbox__input:disabled+.ams-checkbox__label .ams-checkbox__hover-indicator{stroke:none}.ams-checkbox__input:checked:not(:indeterminate)+.ams-checkbox__label .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-checked-fill)}.ams-checkbox__input:checked:not(:indeterminate)+.ams-checkbox__label .ams-checkbox__checked-indicator{display:block}.ams-checkbox__input[aria-invalid=true]:checked+.ams-checkbox__label .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-checked-invalid-fill)}.ams-checkbox__input[aria-invalid=true]:indeterminate+.ams-checkbox__label .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-indeterminate-invalid-fill)}.ams-checkbox__input:disabled:checked+.ams-checkbox__label .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-checked-disabled-fill)}.ams-checkbox__input:disabled:indeterminate+.ams-checkbox__label .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-indeterminate-disabled-fill)}.ams-checkbox__input:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-checked-hover-fill)}.ams-checkbox__input:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-indeterminate-hover-fill)}.ams-checkbox__input[aria-invalid=true]+.ams-checkbox__label:hover .ams-checkbox__rectangle{stroke:var(--ams-checkbox-rectangle-invalid-hover-stroke)}.ams-checkbox__input[aria-invalid=true]+.ams-checkbox__label:hover .ams-checkbox__hover-indicator{stroke:var(--ams-checkbox-hover-indicator-invalid-hover-stroke)}.ams-checkbox__input[aria-invalid=true]:disabled+.ams-checkbox__label:hover .ams-checkbox__rectangle{stroke:var(--ams-checkbox-rectangle-hover-disabled-invalid-stroke)}.ams-checkbox__input:disabled:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-checked-disabled-hover-fill)}.ams-checkbox__input:disabled:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-indeterminate-disabled-hover-fill)}.ams-checkbox__input:disabled+.ams-checkbox__label:hover{text-decoration:none}.ams-checkbox__input:disabled+.ams-checkbox__label:hover .ams-checkbox__hover-indicator{stroke:none}.ams-checkbox__input[aria-invalid=true]:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-checked-invalid-hover-fill)}.ams-checkbox__input[aria-invalid=true]:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill)}.ams-checkbox__input[aria-invalid=true]:disabled:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-checked-hover-disabled-invalid-fill)}.ams-checkbox__input[aria-invalid=true]:disabled:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:var(--ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill)}@media(forced-colors: active){.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__label:hover .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:Canvas;stroke:FieldText}.ams-checkbox__label .ams-checkbox__hover-indicator,.ams-checkbox__label:hover .ams-checkbox__hover-indicator,.ams-checkbox__input[aria-invalid=true]+.ams-checkbox__label .ams-checkbox__hover-indicator,.ams-checkbox__input[aria-invalid=true]+.ams-checkbox__label:hover .ams-checkbox__hover-indicator{stroke:none}}@media(forced-colors: active){.ams-checkbox__input:checked:not(:indeterminate)+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:checked+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:ActiveText;stroke:ActiveText}.ams-checkbox__input:checked:not(:indeterminate)+.ams-checkbox__label .ams-checkbox__checked-indicator,.ams-checkbox__input:checked+.ams-checkbox__label:hover .ams-checkbox__checked-indicator,.ams-checkbox__input[aria-invalid=true]:checked+.ams-checkbox__label .ams-checkbox__checked-indicator,.ams-checkbox__input[aria-invalid=true]:checked+.ams-checkbox__label:hover .ams-checkbox__checked-indicator{stroke:Canvas}}@media(forced-colors: active){.ams-checkbox__input:indeterminate+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:indeterminate+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:ActiveText;stroke:ActiveText}.ams-checkbox__input:indeterminate+.ams-checkbox__label .ams-checkbox__indeterminate-indicator,.ams-checkbox__input:indeterminate+.ams-checkbox__label:hover .ams-checkbox__indeterminate-indicator,.ams-checkbox__input[aria-invalid=true]:indeterminate+.ams-checkbox__label .ams-checkbox__indeterminate-indicator,.ams-checkbox__input[aria-invalid=true]:indeterminate+.ams-checkbox__label:hover .ams-checkbox__indeterminate-indicator{stroke:Canvas}}@media(forced-colors: active){.ams-checkbox__input:disabled+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input:disabled+.ams-checkbox__label:hover .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:disabled+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:disabled+.ams-checkbox__label:hover .ams-checkbox__rectangle{stroke:GrayText}}@media(forced-colors: active){.ams-checkbox__input:disabled:checked+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input:disabled:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:disabled:checked+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:GrayText;stroke:GrayText}}@media(forced-colors: active){.ams-checkbox__input:disabled:indeterminate+.ams-checkbox__label .ams-checkbox__rectangle,.ams-checkbox__input:disabled:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle,.ams-checkbox__input[aria-invalid=true]:disabled:indeterminate+.ams-checkbox__label:hover .ams-checkbox__rectangle{fill:GrayText}}/*# sourceMappingURL=checkbox.css.map */