/* mixins & extensions */ @keyframes in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes in-down { 0% { opacity: 0; transform: translate3D(0, -5px, 0); } 100% { opacity: 1; transform: translate3D(0, 0, 0); } } @keyframes in-up { 0% { opacity: 0; transform: translate3D(0, 5px, 0); } 100% { opacity: 1; transform: translate3D(0, 0, 0); } } @keyframes in-scale { 0% { opacity: 0; transform: scale3D(0.95, 0.95, 1); } 100% { opacity: 1; transform: scale3D(1, 1, 1); } } :root { --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor)); --calcite-internal-duration-factor: var(--calcite-duration-factor, 1); --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor)); --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor)); --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor)); } .calcite-animate { opacity: 0; animation-fill-mode: both; animation-duration: var(--calcite-animation-timing); } .calcite-animate__in { animation-name: in; } .calcite-animate__in-down { animation-name: in-down; } .calcite-animate__in-up { animation-name: in-up; } .calcite-animate__in-scale { animation-name: in-scale; } @media (prefers-reduced-motion: reduce) { :root { --calcite-internal-duration-factor: 0.01; } } /** * Currently only used in Checkbox. */ :root { --calcite-floating-ui-transition: var(--calcite-animation-timing); } :host([hidden]) { display: none; } :host([disabled]) { pointer-events: none; cursor: default; -webkit-user-select: none; user-select: none; opacity: var(--calcite-ui-opacity-disabled); } :host { display: flex; background-color: var(--calcite-ui-foreground-1); inline-size: -moz-fit-content; inline-size: fit-content; outline: 1px solid var(--calcite-ui-border-input); outline-offset: -1px; } :host([disabled]) ::slotted([calcite-hydrated][disabled]), :host([disabled]) [calcite-hydrated][disabled] { /* prevent opacity stacking */ opacity: 1; } :host([layout=vertical]) { flex-direction: column; align-items: flex-start; align-self: flex-start; } :host([width=full]) { inline-size: 100%; min-inline-size: -moz-fit-content; min-inline-size: fit-content; } :host([width=full]) ::slotted(calcite-radio-group-item) { flex: 1 1 auto; } :host([width=full][layout=vertical]) ::slotted(calcite-radio-group-item) { justify-content: flex-start; } ::slotted(input[slot=hidden-form-input]) { margin: 0 !important; opacity: 0 !important; outline: none !important; padding: 0 !important; position: absolute !important; inset: 0 !important; transform: none !important; -webkit-appearance: none !important; z-index: -1 !important; }