@itwin/itwinui-css/css/radio-tile.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-radio-tile{-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));inline-size:calc(var(--iui-size-xl)*5);padding:var(--iui-size-xs);z-index:1;outline:1px solid var(--iui-color-border);background-color:var(--iui-color-background);transition:outline-color var(--iui-duration-1)ease-out;align-content:center;justify-items:center;display:grid;position:relative}.iui-radio-tile:where(:hover){z-index:2;outline-color:var(--iui-color-border-hover)}.iui-radio-tile:where(:hover) .iui-radio-tile-icon svg{fill:var(--iui-color-icon-hover)}.iui-radio-tile:where(:has(input:disabled),[data-iui-disabled=true]){outline-color:var(--iui-color-border-disabled);background-color:var(--iui-color-background-disabled)}.iui-radio-tile-container{-webkit-user-select:none;user-select:none;isolation:isolate;flex-wrap:wrap;gap:1px;display:inline-flex;position:relative}.iui-radio-tile-input{z-index:1;appearance:none;cursor:pointer;margin:0;position:absolute;inset:0}.iui-radio-tile-input:checked{z-index:3;outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}@media (forced-colors:active){.iui-radio-tile-input:checked{outline-color:Highlight}}.iui-radio-tile-input:checked+.iui-radio-tile-icon svg{fill:var(--iui-color-icon-accent)}@media (forced-colors:active){.iui-radio-tile-input:checked+.iui-radio-tile-icon svg{fill:Highlight}}.iui-radio-tile-input:checked:after{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);content:"";background-color:var(--iui-color-icon-accent);flex-shrink:0;display:flex;position:absolute;inset-block-start:var(--iui-size-xs);inset-inline-end:var(--iui-size-xs);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6,14L0,8l2-2l4,4l8-8l2,2L6,14z\" /></svg>");mask:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6,14L0,8l2-2l4,4l8-8l2,2L6,14z\" /></svg>")}@media (forced-colors:active){.iui-radio-tile-input:checked:after{background-color:Highlight}}.iui-radio-tile-input:disabled{cursor:not-allowed}.iui-radio-tile-input:disabled:after{background-color:var(--iui-color-icon-disabled)}@media (forced-colors:active){.iui-radio-tile-input:disabled:after{background-color:GrayText}}.iui-radio-tile-input:disabled+.iui-radio-tile-icon svg{filter:grayscale();fill:var(--iui-color-icon-disabled)}@media (forced-colors:active){.iui-radio-tile-input:disabled+.iui-radio-tile-icon svg{fill:GrayText}}.iui-radio-tile-input:disabled~:is(.iui-radio-tile-label,.iui-radio-tile-sublabel){color:var(--iui-color-text-disabled)}@media (forced-colors:active){.iui-radio-tile-input:disabled~:is(.iui-radio-tile-label,.iui-radio-tile-sublabel){color:GrayText}}.iui-radio-tile-input:disabled:checked{z-index:3;outline:var(--iui-size-3xs)solid var(--iui-color-border)}@media (forced-colors:active){.iui-radio-tile-input:disabled:checked{outline-color:GrayText}}.iui-radio-tile-input:focus-visible{outline-offset:-3px;outline-width:3px}.iui-radio-tile-icon{margin-block-start:calc(var(--iui-size-s)*.5);margin-block-end:var(--iui-size-s)}.iui-radio-tile-icon,.iui-radio-tile-icon svg{inline-size:var(--iui-size-xl);block-size:var(--iui-size-xl);fill:var(--iui-color-icon-muted);transition:fill var(--iui-duration-1)ease-out;flex-shrink:0;display:flex}@media (forced-colors:active){.iui-radio-tile-icon,.iui-radio-tile-icon svg{fill:CanvasText}}.iui-radio-tile-label{font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-semibold);text-align:center;word-break:break-word;color:var(--iui-color-text)}.iui-radio-tile-sublabel{font-size:var(--iui-font-size-0);text-align:center;word-break:break-word;color:var(--iui-color-text-muted)}