public-ui-kolibri

@use '../mixins/to-rem' as *; @layer kol-theme-global { .kol-tooltip { &__arrow { background-color: #626262; } &__content { background-color: #f2f2f2; border-radius: 2px; padding: to-rem(4) to-rem(8); font-size: to-rem(14); line-height: 1.2; border: 1px solid #626262; } } :host { --color-blue: #004494; --color-yellow: #ffd617; --color-grey: #404040; --color-blue-130: #002f67; --color-blue-120: #003776; --color-blue-110: #003d84; --color-blue-100: var(--color-blue); --color-blue-75: #4073af; --color-blue-50: #bfd0e4; --color-blue-25: #bfd0e4; --color-blue-5: #f2f5f9; --color-yellow-120: #f8ae21; --color-yellow-110: #fbc11d; --color-yellow-100: var(--color-yellow); --color-yellow-75: #ffde39; --color-yellow-50: #ffe879; --color-yellow-25: #fff4bb; --color-grey-100: var(--color-grey); --color-grey-75: #707070; --color-grey-50: #9f9f9f; --color-grey-25: #cfcfcf; --color-grey-20: #d9d9d9; --color-grey-15: #e3e3e3; --color-grey-10: #ebebeb; --color-grey-5: #f5f5f5; --color-grey-3: #f9f9f9; --color-blue-n: #006fb4; --color-orange: #f29527; --color-green: #467a39; --color-red: #da2131; --color-red-1xx: #981722; --color-black: #000; --color-white: #fff; --font-family: Arial, sans-serif; --font-size: #{to-rem(16)}; --font-weight: 400; --font-weight-bold: 600; --line-height-regular: 1.5; --line-height-heading: 1.2; --spacing-4xl: #{to-rem(64)}; --spacing-3xl: #{to-rem(48)}; --spacing-2xl: #{to-rem(40)}; --spacing-xl: #{to-rem(32)}; --spacing-l: #{to-rem(24)}; --spacing-m: #{to-rem(16)}; --spacing-s: #{to-rem(12)}; --spacing-xs: #{to-rem(8)}; --spacing-2xs: #{to-rem(4)}; } :host { font-family: var(--font-family); font-size: var(--font-size); } a, button { outline: none; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); } p { font-weight: var(--font-weight); } .kol-span, .kol-span__container { gap: 0.5em; } .required label span::after, .required legend span::after { color: var(--color-red); padding-left: 0.25em; } .badge-text-hint { border-radius: 3px; padding: 0 0.3em; } }