@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); :root { /** BRAND COLOR **/ --brand-color-1000: #0C2C46; --brand-color-900: #0A3A61; --brand-color-800: #07487C; --brand-color-700: #055697; --brand-color-600: #0263B1; --brand-color-500: #0071CC; --brand-color-400: #2485D3; --brand-color-300: #499ADB; --brand-color-200: #6DAEE2; --brand-color-100: #92C2E9; --brand-color-50: #B6D6F0; --brand-color-25: #DBEBF8; /** WARNING COLOR **/ --warning-color-1000: #55421F; --warning-color-900: #775A26; --warning-color-800: #99722E; --warning-color-700: #BB8A35; --warning-color-600: #DDA33C; --warning-color-500: #FFBB43; --warning-color-400: #FFC55E; --warning-color-300: #FFCE79; --warning-color-200: #FFD894; --warning-color-100: #FFE2AE; --warning-color-50: #FFECC9; --warning-color-25: #FFF5E4; /** GRAY COLOR **/ --gray-color-1200: #414751; --gray-color-1000: #606974; --gray-color-900: #6F7A86; --gray-color-800: #7F8B97; --gray-color-700: #8E9CA9; --gray-color-600: #9EADBA; --gray-color-500: #ADBECC; --gray-color-400: #B9C7D3; --gray-color-300: #C4D1DB; --gray-color-200: #D0DAE2; --gray-color-100: #DCE3E9; --gray-color-50: #E8ECF0; --gray-color-25: #F3F6F8; /** DANGER COLOR **/ --danger-color-1000: #51252D; --danger-color-900: #712F3B; --danger-color-800: #913A4A; --danger-color-700: #B14458; --danger-color-600: #D14E66; --danger-color-500: #F15874; --danger-color-400: #F37088; --danger-color-300: #F5889C; --danger-color-200: #F7A0B0; --danger-color-100: #F9B7C3; --danger-color-50: #FBCFD7; --danger-color-25: #FDE7EB; /** SUCCESS COLOR **/ --success-color-1000: #1A4835; --success-color-900: #1E6447; --success-color-800: #228059; --success-color-700: #269C6B; --success-color-600: #2BB77D; --success-color-500: #2FD38F; --success-color-400: #4DD99F; --success-color-300: #6AE0AF; --success-color-200: #88E6BF; --success-color-100: #A6ECCF; --success-color-50: #C4F2DF; --success-color-25: #E1F9EF; /** WHITE **/ --white-color: #FFFF; --background-color: var(--white-color); } :root[data-theme=dark] { --background-color: #0F1F2C; } /** COLORS LIST **/ /** Значения кастомных переменных справедливы для тега

. Как расчитывать значения см. в файле "_typography.scss". */ .bast-button { border: none; cursor: pointer; padding: var(--button-vertical-padding) var(--button-horizontal-padding); border-radius: var(--button-border-radius); outline: 3px solid transparent; font-weight: normal; transition: var(--button-transition); display: flex; align-items: center; justify-content: center; width: fit-content; } .bast-button svg { color: currentColor; } .bast-button:disabled { cursor: not-allowed; opacity: 0.5; } .bast-button--small { --font-size-min: .5rem; --font-size-max: .75rem; --font-size-prefer: 0.393rem + 0.3vw; } .bast-button--expand { width: 100%; } .bast-button--round { border-radius: var(--radius-large); } .bast-button--icon-only { padding: var(--button-vertical-padding); } .bast-button.bast-button--brand.bast-button--filled { --color-background: var(--color-brand-filled-background); --color-text: var(--color-brand-filled-text); --color-border: var(--color-brand-filled-border); --color-outline: var(--color-brand-filled-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--brand.bast-button--filled:not(:disabled):hover { --color-background: var(--color-brand-filled-background-hover); --color-text: var(--color-brand-filled-text-hover); --color-border: var(--color-brand-filled-border-hover); --color-outline: var(--color-brand-filled-outline-hover); } .bast-button.bast-button--brand.bast-button--filled:not(:disabled):active { --color-background: var(--color-brand-filled-background-active); --color-text: var(--color-brand-filled-text-active); --color-border: var(--color-brand-filled-border-active); --color-outline: var(--color-brand-filled-outline-active); } .bast-button.bast-button--brand.bast-button--filled:not(:disabled):focus-visible { --color-background: var(--color-brand-filled-background-focus); --color-text: var(--color-brand-filled-text-focus); --color-border: var(--color-brand-filled-border-focus); --color-outline: var(--color-brand-filled-outline-focus); } .bast-button.bast-button--brand.bast-button--outlined { --color-background: var(--color-brand-outlined-background); --color-text: var(--color-brand-outlined-text); --color-border: var(--color-brand-outlined-border); --color-outline: var(--color-brand-outlined-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--brand.bast-button--outlined:not(:disabled):hover { --color-background: var(--color-brand-outlined-background-hover); --color-text: var(--color-brand-outlined-text-hover); --color-border: var(--color-brand-outlined-border-hover); --color-outline: var(--color-brand-outlined-outline-hover); } .bast-button.bast-button--brand.bast-button--outlined:not(:disabled):active { --color-background: var(--color-brand-outlined-background-active); --color-text: var(--color-brand-outlined-text-active); --color-border: var(--color-brand-outlined-border-active); --color-outline: var(--color-brand-outlined-outline-active); } .bast-button.bast-button--brand.bast-button--outlined:not(:disabled):focus-visible { --color-background: var(--color-brand-outlined-background-focus); --color-text: var(--color-brand-outlined-text-focus); --color-border: var(--color-brand-outlined-border-focus); --color-outline: var(--color-brand-outlined-outline-focus); } .bast-button.bast-button--brand.bast-button--cleared { --color-background: var(--color-brand-cleared-background); --color-text: var(--color-brand-cleared-text); --color-border: var(--color-brand-cleared-border); --color-outline: var(--color-brand-cleared-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--brand.bast-button--cleared:not(:disabled):hover { --color-background: var(--color-brand-cleared-background-hover); --color-text: var(--color-brand-cleared-text-hover); --color-border: var(--color-brand-cleared-border-hover); --color-outline: var(--color-brand-cleared-outline-hover); } .bast-button.bast-button--brand.bast-button--cleared:not(:disabled):active { --color-background: var(--color-brand-cleared-background-active); --color-text: var(--color-brand-cleared-text-active); --color-border: var(--color-brand-cleared-border-active); --color-outline: var(--color-brand-cleared-outline-active); } .bast-button.bast-button--brand.bast-button--cleared:not(:disabled):focus-visible { --color-background: var(--color-brand-cleared-background-focus); --color-text: var(--color-brand-cleared-text-focus); --color-border: var(--color-brand-cleared-border-focus); --color-outline: var(--color-brand-cleared-outline-focus); } .bast-button.bast-button--gray.bast-button--filled { --color-background: var(--color-gray-filled-background); --color-text: var(--color-gray-filled-text); --color-border: var(--color-gray-filled-border); --color-outline: var(--color-gray-filled-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--gray.bast-button--filled:not(:disabled):hover { --color-background: var(--color-gray-filled-background-hover); --color-text: var(--color-gray-filled-text-hover); --color-border: var(--color-gray-filled-border-hover); --color-outline: var(--color-gray-filled-outline-hover); } .bast-button.bast-button--gray.bast-button--filled:not(:disabled):active { --color-background: var(--color-gray-filled-background-active); --color-text: var(--color-gray-filled-text-active); --color-border: var(--color-gray-filled-border-active); --color-outline: var(--color-gray-filled-outline-active); } .bast-button.bast-button--gray.bast-button--filled:not(:disabled):focus-visible { --color-background: var(--color-gray-filled-background-focus); --color-text: var(--color-gray-filled-text-focus); --color-border: var(--color-gray-filled-border-focus); --color-outline: var(--color-gray-filled-outline-focus); } .bast-button.bast-button--gray.bast-button--outlined { --color-background: var(--color-gray-outlined-background); --color-text: var(--color-gray-outlined-text); --color-border: var(--color-gray-outlined-border); --color-outline: var(--color-gray-outlined-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--gray.bast-button--outlined:not(:disabled):hover { --color-background: var(--color-gray-outlined-background-hover); --color-text: var(--color-gray-outlined-text-hover); --color-border: var(--color-gray-outlined-border-hover); --color-outline: var(--color-gray-outlined-outline-hover); } .bast-button.bast-button--gray.bast-button--outlined:not(:disabled):active { --color-background: var(--color-gray-outlined-background-active); --color-text: var(--color-gray-outlined-text-active); --color-border: var(--color-gray-outlined-border-active); --color-outline: var(--color-gray-outlined-outline-active); } .bast-button.bast-button--gray.bast-button--outlined:not(:disabled):focus-visible { --color-background: var(--color-gray-outlined-background-focus); --color-text: var(--color-gray-outlined-text-focus); --color-border: var(--color-gray-outlined-border-focus); --color-outline: var(--color-gray-outlined-outline-focus); } .bast-button.bast-button--gray.bast-button--cleared { --color-background: var(--color-gray-cleared-background); --color-text: var(--color-gray-cleared-text); --color-border: var(--color-gray-cleared-border); --color-outline: var(--color-gray-cleared-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--gray.bast-button--cleared:not(:disabled):hover { --color-background: var(--color-gray-cleared-background-hover); --color-text: var(--color-gray-cleared-text-hover); --color-border: var(--color-gray-cleared-border-hover); --color-outline: var(--color-gray-cleared-outline-hover); } .bast-button.bast-button--gray.bast-button--cleared:not(:disabled):active { --color-background: var(--color-gray-cleared-background-active); --color-text: var(--color-gray-cleared-text-active); --color-border: var(--color-gray-cleared-border-active); --color-outline: var(--color-gray-cleared-outline-active); } .bast-button.bast-button--gray.bast-button--cleared:not(:disabled):focus-visible { --color-background: var(--color-gray-cleared-background-focus); --color-text: var(--color-gray-cleared-text-focus); --color-border: var(--color-gray-cleared-border-focus); --color-outline: var(--color-gray-cleared-outline-focus); } .bast-button.bast-button--success.bast-button--filled { --color-background: var(--color-success-filled-background); --color-text: var(--color-success-filled-text); --color-border: var(--color-success-filled-border); --color-outline: var(--color-success-filled-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--success.bast-button--filled:not(:disabled):hover { --color-background: var(--color-success-filled-background-hover); --color-text: var(--color-success-filled-text-hover); --color-border: var(--color-success-filled-border-hover); --color-outline: var(--color-success-filled-outline-hover); } .bast-button.bast-button--success.bast-button--filled:not(:disabled):active { --color-background: var(--color-success-filled-background-active); --color-text: var(--color-success-filled-text-active); --color-border: var(--color-success-filled-border-active); --color-outline: var(--color-success-filled-outline-active); } .bast-button.bast-button--success.bast-button--filled:not(:disabled):focus-visible { --color-background: var(--color-success-filled-background-focus); --color-text: var(--color-success-filled-text-focus); --color-border: var(--color-success-filled-border-focus); --color-outline: var(--color-success-filled-outline-focus); } .bast-button.bast-button--success.bast-button--outlined { --color-background: var(--color-success-outlined-background); --color-text: var(--color-success-outlined-text); --color-border: var(--color-success-outlined-border); --color-outline: var(--color-success-outlined-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--success.bast-button--outlined:not(:disabled):hover { --color-background: var(--color-success-outlined-background-hover); --color-text: var(--color-success-outlined-text-hover); --color-border: var(--color-success-outlined-border-hover); --color-outline: var(--color-success-outlined-outline-hover); } .bast-button.bast-button--success.bast-button--outlined:not(:disabled):active { --color-background: var(--color-success-outlined-background-active); --color-text: var(--color-success-outlined-text-active); --color-border: var(--color-success-outlined-border-active); --color-outline: var(--color-success-outlined-outline-active); } .bast-button.bast-button--success.bast-button--outlined:not(:disabled):focus-visible { --color-background: var(--color-success-outlined-background-focus); --color-text: var(--color-success-outlined-text-focus); --color-border: var(--color-success-outlined-border-focus); --color-outline: var(--color-success-outlined-outline-focus); } .bast-button.bast-button--success.bast-button--cleared { --color-background: var(--color-success-cleared-background); --color-text: var(--color-success-cleared-text); --color-border: var(--color-success-cleared-border); --color-outline: var(--color-success-cleared-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--success.bast-button--cleared:not(:disabled):hover { --color-background: var(--color-success-cleared-background-hover); --color-text: var(--color-success-cleared-text-hover); --color-border: var(--color-success-cleared-border-hover); --color-outline: var(--color-success-cleared-outline-hover); } .bast-button.bast-button--success.bast-button--cleared:not(:disabled):active { --color-background: var(--color-success-cleared-background-active); --color-text: var(--color-success-cleared-text-active); --color-border: var(--color-success-cleared-border-active); --color-outline: var(--color-success-cleared-outline-active); } .bast-button.bast-button--success.bast-button--cleared:not(:disabled):focus-visible { --color-background: var(--color-success-cleared-background-focus); --color-text: var(--color-success-cleared-text-focus); --color-border: var(--color-success-cleared-border-focus); --color-outline: var(--color-success-cleared-outline-focus); } .bast-button.bast-button--danger.bast-button--filled { --color-background: var(--color-danger-filled-background); --color-text: var(--color-danger-filled-text); --color-border: var(--color-danger-filled-border); --color-outline: var(--color-danger-filled-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--danger.bast-button--filled:not(:disabled):hover { --color-background: var(--color-danger-filled-background-hover); --color-text: var(--color-danger-filled-text-hover); --color-border: var(--color-danger-filled-border-hover); --color-outline: var(--color-danger-filled-outline-hover); } .bast-button.bast-button--danger.bast-button--filled:not(:disabled):active { --color-background: var(--color-danger-filled-background-active); --color-text: var(--color-danger-filled-text-active); --color-border: var(--color-danger-filled-border-active); --color-outline: var(--color-danger-filled-outline-active); } .bast-button.bast-button--danger.bast-button--filled:not(:disabled):focus-visible { --color-background: var(--color-danger-filled-background-focus); --color-text: var(--color-danger-filled-text-focus); --color-border: var(--color-danger-filled-border-focus); --color-outline: var(--color-danger-filled-outline-focus); } .bast-button.bast-button--danger.bast-button--outlined { --color-background: var(--color-danger-outlined-background); --color-text: var(--color-danger-outlined-text); --color-border: var(--color-danger-outlined-border); --color-outline: var(--color-danger-outlined-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--danger.bast-button--outlined:not(:disabled):hover { --color-background: var(--color-danger-outlined-background-hover); --color-text: var(--color-danger-outlined-text-hover); --color-border: var(--color-danger-outlined-border-hover); --color-outline: var(--color-danger-outlined-outline-hover); } .bast-button.bast-button--danger.bast-button--outlined:not(:disabled):active { --color-background: var(--color-danger-outlined-background-active); --color-text: var(--color-danger-outlined-text-active); --color-border: var(--color-danger-outlined-border-active); --color-outline: var(--color-danger-outlined-outline-active); } .bast-button.bast-button--danger.bast-button--outlined:not(:disabled):focus-visible { --color-background: var(--color-danger-outlined-background-focus); --color-text: var(--color-danger-outlined-text-focus); --color-border: var(--color-danger-outlined-border-focus); --color-outline: var(--color-danger-outlined-outline-focus); } .bast-button.bast-button--danger.bast-button--cleared { --color-background: var(--color-danger-cleared-background); --color-text: var(--color-danger-cleared-text); --color-border: var(--color-danger-cleared-border); --color-outline: var(--color-danger-cleared-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--danger.bast-button--cleared:not(:disabled):hover { --color-background: var(--color-danger-cleared-background-hover); --color-text: var(--color-danger-cleared-text-hover); --color-border: var(--color-danger-cleared-border-hover); --color-outline: var(--color-danger-cleared-outline-hover); } .bast-button.bast-button--danger.bast-button--cleared:not(:disabled):active { --color-background: var(--color-danger-cleared-background-active); --color-text: var(--color-danger-cleared-text-active); --color-border: var(--color-danger-cleared-border-active); --color-outline: var(--color-danger-cleared-outline-active); } .bast-button.bast-button--danger.bast-button--cleared:not(:disabled):focus-visible { --color-background: var(--color-danger-cleared-background-focus); --color-text: var(--color-danger-cleared-text-focus); --color-border: var(--color-danger-cleared-border-focus); --color-outline: var(--color-danger-cleared-outline-focus); } .bast-button.bast-button--warning.bast-button--filled { --color-background: var(--color-warning-filled-background); --color-text: var(--color-warning-filled-text); --color-border: var(--color-warning-filled-border); --color-outline: var(--color-warning-filled-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--warning.bast-button--filled:not(:disabled):hover { --color-background: var(--color-warning-filled-background-hover); --color-text: var(--color-warning-filled-text-hover); --color-border: var(--color-warning-filled-border-hover); --color-outline: var(--color-warning-filled-outline-hover); } .bast-button.bast-button--warning.bast-button--filled:not(:disabled):active { --color-background: var(--color-warning-filled-background-active); --color-text: var(--color-warning-filled-text-active); --color-border: var(--color-warning-filled-border-active); --color-outline: var(--color-warning-filled-outline-active); } .bast-button.bast-button--warning.bast-button--filled:not(:disabled):focus-visible { --color-background: var(--color-warning-filled-background-focus); --color-text: var(--color-warning-filled-text-focus); --color-border: var(--color-warning-filled-border-focus); --color-outline: var(--color-warning-filled-outline-focus); } .bast-button.bast-button--warning.bast-button--outlined { --color-background: var(--color-warning-outlined-background); --color-text: var(--color-warning-outlined-text); --color-border: var(--color-warning-outlined-border); --color-outline: var(--color-warning-outlined-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--warning.bast-button--outlined:not(:disabled):hover { --color-background: var(--color-warning-outlined-background-hover); --color-text: var(--color-warning-outlined-text-hover); --color-border: var(--color-warning-outlined-border-hover); --color-outline: var(--color-warning-outlined-outline-hover); } .bast-button.bast-button--warning.bast-button--outlined:not(:disabled):active { --color-background: var(--color-warning-outlined-background-active); --color-text: var(--color-warning-outlined-text-active); --color-border: var(--color-warning-outlined-border-active); --color-outline: var(--color-warning-outlined-outline-active); } .bast-button.bast-button--warning.bast-button--outlined:not(:disabled):focus-visible { --color-background: var(--color-warning-outlined-background-focus); --color-text: var(--color-warning-outlined-text-focus); --color-border: var(--color-warning-outlined-border-focus); --color-outline: var(--color-warning-outlined-outline-focus); } .bast-button.bast-button--warning.bast-button--cleared { --color-background: var(--color-warning-cleared-background); --color-text: var(--color-warning-cleared-text); --color-border: var(--color-warning-cleared-border); --color-outline: var(--color-warning-cleared-outline); background-color: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border); outline: 3px solid var(--color-outline); } .bast-button.bast-button--warning.bast-button--cleared:not(:disabled):hover { --color-background: var(--color-warning-cleared-background-hover); --color-text: var(--color-warning-cleared-text-hover); --color-border: var(--color-warning-cleared-border-hover); --color-outline: var(--color-warning-cleared-outline-hover); } .bast-button.bast-button--warning.bast-button--cleared:not(:disabled):active { --color-background: var(--color-warning-cleared-background-active); --color-text: var(--color-warning-cleared-text-active); --color-border: var(--color-warning-cleared-border-active); --color-outline: var(--color-warning-cleared-outline-active); } .bast-button.bast-button--warning.bast-button--cleared:not(:disabled):focus-visible { --color-background: var(--color-warning-cleared-background-focus); --color-text: var(--color-warning-cleared-text-focus); --color-border: var(--color-warning-cleared-border-focus); --color-outline: var(--color-warning-cleared-outline-focus); } button, input[type=submit] { /** TRANSITION ANIMATION **/ --button-transition: background-color 0.3s ease, outline-color 0.3s ease, color 0.3s ease; /** BORDERS **/ --button-border-radius: var(--radius-small); /** PADDINGS **/ --button-horizontal-padding: 1.100rem; --button-vertical-padding: .625rem; /** COLORS **/ /** FILLED **/ --color-brand-filled-background: var(--brand-color-500); --color-brand-filled-text: var(--white-color); --color-brand-filled-border: transparent; --color-brand-filled-outline: transparent; --color-brand-filled-background-active: var(--brand-color-500); --color-brand-filled-text-active: var(--white-color); --color-brand-filled-border-active: transparent; --color-brand-filled-outline-active: var(--brand-color-50); --color-brand-filled-background-hover: var(--brand-color-400); --color-brand-filled-text-hover: var(--white-color); --color-brand-filled-border-hover: transparent; --color-brand-filled-outline-hover: transparent; --color-brand-filled-background-focus: var(--brand-color-500); --color-brand-filled-text-focus: var(--white-color); --color-brand-filled-border-focus: transparent; --color-brand-filled-outline-focus: var(--brand-color-50); /** OUTLINED **/ --color-brand-outlined-background: var(--brand-color-25); --color-brand-outlined-text: var(--brand-color-600); --color-brand-outlined-border: var(--brand-color-400); --color-brand-outlined-outline: transparent; --color-brand-outlined-background-active: var(--brand-color-100); --color-brand-outlined-text-active: var(--gray-color-25); --color-brand-outlined-border-active: var(--brand-color-600); --color-brand-outlined-outline-active: var(--brand-color-25); --color-brand-outlined-background-hover: var(--brand-color-25); --color-brand-outlined-text-hover: var(--brand-color-600); --color-brand-outlined-border-hover: var(--brand-color-100); --color-brand-outlined-outline-hover: transparent; --color-brand-outlined-background-focus: var(--brand-color-100); --color-brand-outlined-text-focus: var(--brand-color-25); --color-brand-outlined-border-focus: var(--brand-color-400); --color-brand-outlined-outline-focus: transparent; /** CLEARED **/ --color-brand-cleared-background: transparent; --color-brand-cleared-text: var(--brand-color-500); --color-brand-cleared-border: transparent; --color-brand-cleared-outline: transparent; --color-brand-cleared-background-active: transparent; --color-brand-cleared-text-active: var(--brand-color-400); --color-brand-cleared-border-active: transparent; --color-brand-cleared-outline-active: var(--brand-color-500); --color-brand-cleared-background-hover: transparent; --color-brand-cleared-text-hover: var(--brand-color-200); --color-brand-cleared-border-hover: var(--brand-color-25); --color-brand-cleared-outline-hover: transparent; --color-brand-cleared-background-focus: transparent; --color-brand-cleared-text-focus: var(--brand-color-400); --color-brand-cleared-border-focus: transparent; --color-brand-cleared-outline-focus: var(--brand-color-200); /** FILLED **/ --color-gray-filled-background: var(--gray-color-500); --color-gray-filled-text: var(--white-color); --color-gray-filled-border: transparent; --color-gray-filled-outline: transparent; --color-gray-filled-background-active: var(--gray-color-500); --color-gray-filled-text-active: var(--white-color); --color-gray-filled-border-active: transparent; --color-gray-filled-outline-active: var(--gray-color-50); --color-gray-filled-background-hover: var(--gray-color-400); --color-gray-filled-text-hover: var(--white-color); --color-gray-filled-border-hover: transparent; --color-gray-filled-outline-hover: transparent; --color-gray-filled-background-focus: var(--gray-color-500); --color-gray-filled-text-focus: var(--white-color); --color-gray-filled-border-focus: transparent; --color-gray-filled-outline-focus: var(--gray-color-50); /** OUTLINED **/ --color-gray-outlined-background: var(--gray-color-25); --color-gray-outlined-text: var(--gray-color-600); --color-gray-outlined-border: var(--gray-color-400); --color-gray-outlined-outline: transparent; --color-gray-outlined-background-active: var(--gray-color-100); --color-gray-outlined-text-active: var(--gray-color-25); --color-gray-outlined-border-active: var(--gray-color-600); --color-gray-outlined-outline-active: var(--gray-color-25); --color-gray-outlined-background-hover: var(--gray-color-25); --color-gray-outlined-text-hover: var(--gray-color-600); --color-gray-outlined-border-hover: var(--gray-color-100); --color-gray-outlined-outline-hover: transparent; --color-gray-outlined-background-focus: var(--gray-color-100); --color-gray-outlined-text-focus: var(--gray-color-25); --color-gray-outlined-border-focus: var(--gray-color-400); --color-gray-outlined-outline-focus: transparent; /** CLEARED **/ --color-gray-cleared-background: transparent; --color-gray-cleared-text: var(--gray-color-500); --color-gray-cleared-border: transparent; --color-gray-cleared-outline: transparent; --color-gray-cleared-background-active: transparent; --color-gray-cleared-text-active: var(--gray-color-400); --color-gray-cleared-border-active: transparent; --color-gray-cleared-outline-active: var(--gray-color-500); --color-gray-cleared-background-hover: transparent; --color-gray-cleared-text-hover: var(--gray-color-200); --color-gray-cleared-border-hover: var(--gray-color-25); --color-gray-cleared-outline-hover: transparent; --color-gray-cleared-background-focus: transparent; --color-gray-cleared-text-focus: var(--gray-color-400); --color-gray-cleared-border-focus: transparent; --color-gray-cleared-outline-focus: var(--gray-color-200); /** FILLED **/ --color-success-filled-background: var(--success-color-500); --color-success-filled-text: var(--white-color); --color-success-filled-border: transparent; --color-success-filled-outline: transparent; --color-success-filled-background-active: var(--success-color-500); --color-success-filled-text-active: var(--white-color); --color-success-filled-border-active: transparent; --color-success-filled-outline-active: var(--success-color-50); --color-success-filled-background-hover: var(--success-color-400); --color-success-filled-text-hover: var(--white-color); --color-success-filled-border-hover: transparent; --color-success-filled-outline-hover: transparent; --color-success-filled-background-focus: var(--success-color-500); --color-success-filled-text-focus: var(--white-color); --color-success-filled-border-focus: transparent; --color-success-filled-outline-focus: var(--success-color-50); /** OUTLINED **/ --color-success-outlined-background: var(--success-color-25); --color-success-outlined-text: var(--success-color-600); --color-success-outlined-border: var(--success-color-400); --color-success-outlined-outline: transparent; --color-success-outlined-background-active: var(--success-color-100); --color-success-outlined-text-active: var(--gray-color-25); --color-success-outlined-border-active: var(--success-color-600); --color-success-outlined-outline-active: var(--success-color-25); --color-success-outlined-background-hover: var(--success-color-25); --color-success-outlined-text-hover: var(--success-color-600); --color-success-outlined-border-hover: var(--success-color-100); --color-success-outlined-outline-hover: transparent; --color-success-outlined-background-focus: var(--success-color-100); --color-success-outlined-text-focus: var(--success-color-25); --color-success-outlined-border-focus: var(--success-color-400); --color-success-outlined-outline-focus: transparent; /** CLEARED **/ --color-success-cleared-background: transparent; --color-success-cleared-text: var(--success-color-500); --color-success-cleared-border: transparent; --color-success-cleared-outline: transparent; --color-success-cleared-background-active: transparent; --color-success-cleared-text-active: var(--success-color-400); --color-success-cleared-border-active: transparent; --color-success-cleared-outline-active: var(--success-color-500); --color-success-cleared-background-hover: transparent; --color-success-cleared-text-hover: var(--success-color-200); --color-success-cleared-border-hover: var(--success-color-25); --color-success-cleared-outline-hover: transparent; --color-success-cleared-background-focus: transparent; --color-success-cleared-text-focus: var(--success-color-400); --color-success-cleared-border-focus: transparent; --color-success-cleared-outline-focus: var(--success-color-200); /** FILLED **/ --color-danger-filled-background: var(--danger-color-500); --color-danger-filled-text: var(--white-color); --color-danger-filled-border: transparent; --color-danger-filled-outline: transparent; --color-danger-filled-background-active: var(--danger-color-500); --color-danger-filled-text-active: var(--white-color); --color-danger-filled-border-active: transparent; --color-danger-filled-outline-active: var(--danger-color-50); --color-danger-filled-background-hover: var(--danger-color-400); --color-danger-filled-text-hover: var(--white-color); --color-danger-filled-border-hover: transparent; --color-danger-filled-outline-hover: transparent; --color-danger-filled-background-focus: var(--danger-color-500); --color-danger-filled-text-focus: var(--white-color); --color-danger-filled-border-focus: transparent; --color-danger-filled-outline-focus: var(--danger-color-50); /** OUTLINED **/ --color-danger-outlined-background: var(--danger-color-25); --color-danger-outlined-text: var(--danger-color-600); --color-danger-outlined-border: var(--danger-color-400); --color-danger-outlined-outline: transparent; --color-danger-outlined-background-active: var(--danger-color-100); --color-danger-outlined-text-active: var(--gray-color-25); --color-danger-outlined-border-active: var(--danger-color-600); --color-danger-outlined-outline-active: var(--danger-color-25); --color-danger-outlined-background-hover: var(--danger-color-25); --color-danger-outlined-text-hover: var(--danger-color-600); --color-danger-outlined-border-hover: var(--danger-color-100); --color-danger-outlined-outline-hover: transparent; --color-danger-outlined-background-focus: var(--danger-color-100); --color-danger-outlined-text-focus: var(--danger-color-25); --color-danger-outlined-border-focus: var(--danger-color-400); --color-danger-outlined-outline-focus: transparent; /** CLEARED **/ --color-danger-cleared-background: transparent; --color-danger-cleared-text: var(--danger-color-500); --color-danger-cleared-border: transparent; --color-danger-cleared-outline: transparent; --color-danger-cleared-background-active: transparent; --color-danger-cleared-text-active: var(--danger-color-400); --color-danger-cleared-border-active: transparent; --color-danger-cleared-outline-active: var(--danger-color-500); --color-danger-cleared-background-hover: transparent; --color-danger-cleared-text-hover: var(--danger-color-200); --color-danger-cleared-border-hover: var(--danger-color-25); --color-danger-cleared-outline-hover: transparent; --color-danger-cleared-background-focus: transparent; --color-danger-cleared-text-focus: var(--danger-color-400); --color-danger-cleared-border-focus: transparent; --color-danger-cleared-outline-focus: var(--danger-color-200); /** FILLED **/ --color-warning-filled-background: var(--warning-color-500); --color-warning-filled-text: var(--white-color); --color-warning-filled-border: transparent; --color-warning-filled-outline: transparent; --color-warning-filled-background-active: var(--warning-color-500); --color-warning-filled-text-active: var(--white-color); --color-warning-filled-border-active: transparent; --color-warning-filled-outline-active: var(--warning-color-50); --color-warning-filled-background-hover: var(--warning-color-400); --color-warning-filled-text-hover: var(--white-color); --color-warning-filled-border-hover: transparent; --color-warning-filled-outline-hover: transparent; --color-warning-filled-background-focus: var(--warning-color-500); --color-warning-filled-text-focus: var(--white-color); --color-warning-filled-border-focus: transparent; --color-warning-filled-outline-focus: var(--warning-color-50); /** OUTLINED **/ --color-warning-outlined-background: var(--warning-color-25); --color-warning-outlined-text: var(--warning-color-600); --color-warning-outlined-border: var(--warning-color-400); --color-warning-outlined-outline: transparent; --color-warning-outlined-background-active: var(--warning-color-100); --color-warning-outlined-text-active: var(--gray-color-25); --color-warning-outlined-border-active: var(--warning-color-600); --color-warning-outlined-outline-active: var(--warning-color-25); --color-warning-outlined-background-hover: var(--warning-color-25); --color-warning-outlined-text-hover: var(--warning-color-600); --color-warning-outlined-border-hover: var(--warning-color-100); --color-warning-outlined-outline-hover: transparent; --color-warning-outlined-background-focus: var(--warning-color-100); --color-warning-outlined-text-focus: var(--warning-color-25); --color-warning-outlined-border-focus: var(--warning-color-400); --color-warning-outlined-outline-focus: transparent; /** CLEARED **/ --color-warning-cleared-background: transparent; --color-warning-cleared-text: var(--warning-color-500); --color-warning-cleared-border: transparent; --color-warning-cleared-outline: transparent; --color-warning-cleared-background-active: transparent; --color-warning-cleared-text-active: var(--warning-color-400); --color-warning-cleared-border-active: transparent; --color-warning-cleared-outline-active: var(--warning-color-500); --color-warning-cleared-background-hover: transparent; --color-warning-cleared-text-hover: var(--warning-color-200); --color-warning-cleared-border-hover: var(--warning-color-25); --color-warning-cleared-outline-hover: transparent; --color-warning-cleared-background-focus: transparent; --color-warning-cleared-text-focus: var(--warning-color-400); --color-warning-cleared-border-focus: transparent; --color-warning-cleared-outline-focus: var(--warning-color-200); } :root[data-theme=dark] button, :root[data-theme=dark] input[type=submit] { /** FILLED **/ --color-brand-filled-background: var(--brand-color-600); --color-brand-filled-text: var(--white-color); --color-brand-filled-border: transparent; --color-brand-filled-outline: transparent; --color-brand-filled-background-active: var(--brand-color-600); --color-brand-filled-text-active: var(--white-color); --color-brand-filled-border-active: transparent; --color-brand-filled-outline-active: var(--brand-color-200); --color-brand-filled-background-hover: var(--brand-color-500); --color-brand-filled-text-hover: var(--white-color); --color-brand-filled-border-hover: transparent; --color-brand-filled-outline-hover: transparent; --color-brand-filled-background-focus: var(--brand-color-600); --color-brand-filled-text-focus: var(--white-color); --color-brand-filled-border-focus: transparent; --color-brand-filled-outline-focus: var(--brand-color-200); /** OUTLINED **/ --color-brand-outlined-background: var(--brand-color-50); --color-brand-outlined-text: var(--brand-color-700); --color-brand-outlined-border: var(--brand-color-500); --color-brand-outlined-outline: transparent; --color-brand-outlined-background-active: var(--brand-color-200); --color-brand-outlined-text-active: var(--gray-color-50); --color-brand-outlined-border-active: var(--brand-color-700); --color-brand-outlined-outline-active: var(--brand-color-50); --color-brand-outlined-background-hover: var(--brand-color-50); --color-brand-outlined-text-hover: var(--brand-color-700); --color-brand-outlined-border-hover: var(--brand-color-200); --color-brand-outlined-outline-hover: transparent; --color-brand-outlined-background-focus: var(--brand-color-200); --color-brand-outlined-text-focus: var(--brand-color-50); --color-brand-outlined-border-focus: var(--brand-color-500); --color-brand-outlined-outline-focus: transparent; /** CLEARED **/ --color-brand-cleared-background: transparent; --color-brand-cleared-text: var(--brand-color-600); --color-brand-cleared-border: transparent; --color-brand-cleared-outline: transparent; --color-brand-cleared-background-active: transparent; --color-brand-cleared-text-active: var(--brand-color-500); --color-brand-cleared-border-active: transparent; --color-brand-cleared-outline-active: var(--brand-color-600); --color-brand-cleared-background-hover: transparent; --color-brand-cleared-text-hover: var(--brand-color-300); --color-brand-cleared-border-hover: var(--brand-color-50); --color-brand-cleared-outline-hover: transparent; --color-brand-cleared-background-focus: transparent; --color-brand-cleared-text-focus: var(--brand-color-500); --color-brand-cleared-border-focus: transparent; --color-brand-cleared-outline-focus: var(--brand-color-300); /** FILLED **/ --color-gray-filled-background: var(--gray-color-600); --color-gray-filled-text: var(--white-color); --color-gray-filled-border: transparent; --color-gray-filled-outline: transparent; --color-gray-filled-background-active: var(--gray-color-600); --color-gray-filled-text-active: var(--white-color); --color-gray-filled-border-active: transparent; --color-gray-filled-outline-active: var(--gray-color-200); --color-gray-filled-background-hover: var(--gray-color-500); --color-gray-filled-text-hover: var(--white-color); --color-gray-filled-border-hover: transparent; --color-gray-filled-outline-hover: transparent; --color-gray-filled-background-focus: var(--gray-color-600); --color-gray-filled-text-focus: var(--white-color); --color-gray-filled-border-focus: transparent; --color-gray-filled-outline-focus: var(--gray-color-200); /** OUTLINED **/ --color-gray-outlined-background: var(--gray-color-50); --color-gray-outlined-text: var(--gray-color-700); --color-gray-outlined-border: var(--gray-color-500); --color-gray-outlined-outline: transparent; --color-gray-outlined-background-active: var(--gray-color-200); --color-gray-outlined-text-active: var(--gray-color-50); --color-gray-outlined-border-active: var(--gray-color-700); --color-gray-outlined-outline-active: var(--gray-color-50); --color-gray-outlined-background-hover: var(--gray-color-50); --color-gray-outlined-text-hover: var(--gray-color-700); --color-gray-outlined-border-hover: var(--gray-color-200); --color-gray-outlined-outline-hover: transparent; --color-gray-outlined-background-focus: var(--gray-color-200); --color-gray-outlined-text-focus: var(--gray-color-50); --color-gray-outlined-border-focus: var(--gray-color-500); --color-gray-outlined-outline-focus: transparent; /** CLEARED **/ --color-gray-cleared-background: transparent; --color-gray-cleared-text: var(--gray-color-600); --color-gray-cleared-border: transparent; --color-gray-cleared-outline: transparent; --color-gray-cleared-background-active: transparent; --color-gray-cleared-text-active: var(--gray-color-500); --color-gray-cleared-border-active: transparent; --color-gray-cleared-outline-active: var(--gray-color-600); --color-gray-cleared-background-hover: transparent; --color-gray-cleared-text-hover: var(--gray-color-300); --color-gray-cleared-border-hover: var(--gray-color-50); --color-gray-cleared-outline-hover: transparent; --color-gray-cleared-background-focus: transparent; --color-gray-cleared-text-focus: var(--gray-color-500); --color-gray-cleared-border-focus: transparent; --color-gray-cleared-outline-focus: var(--gray-color-300); /** FILLED **/ --color-success-filled-background: var(--success-color-600); --color-success-filled-text: var(--white-color); --color-success-filled-border: transparent; --color-success-filled-outline: transparent; --color-success-filled-background-active: var(--success-color-600); --color-success-filled-text-active: var(--white-color); --color-success-filled-border-active: transparent; --color-success-filled-outline-active: var(--success-color-200); --color-success-filled-background-hover: var(--success-color-500); --color-success-filled-text-hover: var(--white-color); --color-success-filled-border-hover: transparent; --color-success-filled-outline-hover: transparent; --color-success-filled-background-focus: var(--success-color-600); --color-success-filled-text-focus: var(--white-color); --color-success-filled-border-focus: transparent; --color-success-filled-outline-focus: var(--success-color-200); /** OUTLINED **/ --color-success-outlined-background: var(--success-color-50); --color-success-outlined-text: var(--success-color-700); --color-success-outlined-border: var(--success-color-500); --color-success-outlined-outline: transparent; --color-success-outlined-background-active: var(--success-color-200); --color-success-outlined-text-active: var(--gray-color-50); --color-success-outlined-border-active: var(--success-color-700); --color-success-outlined-outline-active: var(--success-color-50); --color-success-outlined-background-hover: var(--success-color-50); --color-success-outlined-text-hover: var(--success-color-700); --color-success-outlined-border-hover: var(--success-color-200); --color-success-outlined-outline-hover: transparent; --color-success-outlined-background-focus: var(--success-color-200); --color-success-outlined-text-focus: var(--success-color-50); --color-success-outlined-border-focus: var(--success-color-500); --color-success-outlined-outline-focus: transparent; /** CLEARED **/ --color-success-cleared-background: transparent; --color-success-cleared-text: var(--success-color-600); --color-success-cleared-border: transparent; --color-success-cleared-outline: transparent; --color-success-cleared-background-active: transparent; --color-success-cleared-text-active: var(--success-color-500); --color-success-cleared-border-active: transparent; --color-success-cleared-outline-active: var(--success-color-600); --color-success-cleared-background-hover: transparent; --color-success-cleared-text-hover: var(--success-color-300); --color-success-cleared-border-hover: var(--success-color-50); --color-success-cleared-outline-hover: transparent; --color-success-cleared-background-focus: transparent; --color-success-cleared-text-focus: var(--success-color-500); --color-success-cleared-border-focus: transparent; --color-success-cleared-outline-focus: var(--success-color-300); /** FILLED **/ --color-danger-filled-background: var(--danger-color-600); --color-danger-filled-text: var(--white-color); --color-danger-filled-border: transparent; --color-danger-filled-outline: transparent; --color-danger-filled-background-active: var(--danger-color-600); --color-danger-filled-text-active: var(--white-color); --color-danger-filled-border-active: transparent; --color-danger-filled-outline-active: var(--danger-color-200); --color-danger-filled-background-hover: var(--danger-color-500); --color-danger-filled-text-hover: var(--white-color); --color-danger-filled-border-hover: transparent; --color-danger-filled-outline-hover: transparent; --color-danger-filled-background-focus: var(--danger-color-600); --color-danger-filled-text-focus: var(--white-color); --color-danger-filled-border-focus: transparent; --color-danger-filled-outline-focus: var(--danger-color-200); /** OUTLINED **/ --color-danger-outlined-background: var(--danger-color-50); --color-danger-outlined-text: var(--danger-color-700); --color-danger-outlined-border: var(--danger-color-500); --color-danger-outlined-outline: transparent; --color-danger-outlined-background-active: var(--danger-color-200); --color-danger-outlined-text-active: var(--gray-color-50); --color-danger-outlined-border-active: var(--danger-color-700); --color-danger-outlined-outline-active: var(--danger-color-50); --color-danger-outlined-background-hover: var(--danger-color-50); --color-danger-outlined-text-hover: var(--danger-color-700); --color-danger-outlined-border-hover: var(--danger-color-200); --color-danger-outlined-outline-hover: transparent; --color-danger-outlined-background-focus: var(--danger-color-200); --color-danger-outlined-text-focus: var(--danger-color-50); --color-danger-outlined-border-focus: var(--danger-color-500); --color-danger-outlined-outline-focus: transparent; /** CLEARED **/ --color-danger-cleared-background: transparent; --color-danger-cleared-text: var(--danger-color-600); --color-danger-cleared-border: transparent; --color-danger-cleared-outline: transparent; --color-danger-cleared-background-active: transparent; --color-danger-cleared-text-active: var(--danger-color-500); --color-danger-cleared-border-active: transparent; --color-danger-cleared-outline-active: var(--danger-color-600); --color-danger-cleared-background-hover: transparent; --color-danger-cleared-text-hover: var(--danger-color-300); --color-danger-cleared-border-hover: var(--danger-color-50); --color-danger-cleared-outline-hover: transparent; --color-danger-cleared-background-focus: transparent; --color-danger-cleared-text-focus: var(--danger-color-500); --color-danger-cleared-border-focus: transparent; --color-danger-cleared-outline-focus: var(--danger-color-300); /** FILLED **/ --color-warning-filled-background: var(--warning-color-600); --color-warning-filled-text: var(--white-color); --color-warning-filled-border: transparent; --color-warning-filled-outline: transparent; --color-warning-filled-background-active: var(--warning-color-600); --color-warning-filled-text-active: var(--white-color); --color-warning-filled-border-active: transparent; --color-warning-filled-outline-active: var(--warning-color-200); --color-warning-filled-background-hover: var(--warning-color-500); --color-warning-filled-text-hover: var(--white-color); --color-warning-filled-border-hover: transparent; --color-warning-filled-outline-hover: transparent; --color-warning-filled-background-focus: var(--warning-color-600); --color-warning-filled-text-focus: var(--white-color); --color-warning-filled-border-focus: transparent; --color-warning-filled-outline-focus: var(--warning-color-200); /** OUTLINED **/ --color-warning-outlined-background: var(--warning-color-50); --color-warning-outlined-text: var(--warning-color-700); --color-warning-outlined-border: var(--warning-color-500); --color-warning-outlined-outline: transparent; --color-warning-outlined-background-active: var(--warning-color-200); --color-warning-outlined-text-active: var(--gray-color-50); --color-warning-outlined-border-active: var(--warning-color-700); --color-warning-outlined-outline-active: var(--warning-color-50); --color-warning-outlined-background-hover: var(--warning-color-50); --color-warning-outlined-text-hover: var(--warning-color-700); --color-warning-outlined-border-hover: var(--warning-color-200); --color-warning-outlined-outline-hover: transparent; --color-warning-outlined-background-focus: var(--warning-color-200); --color-warning-outlined-text-focus: var(--warning-color-50); --color-warning-outlined-border-focus: var(--warning-color-500); --color-warning-outlined-outline-focus: transparent; /** CLEARED **/ --color-warning-cleared-background: transparent; --color-warning-cleared-text: var(--warning-color-600); --color-warning-cleared-border: transparent; --color-warning-cleared-outline: transparent; --color-warning-cleared-background-active: transparent; --color-warning-cleared-text-active: var(--warning-color-500); --color-warning-cleared-border-active: transparent; --color-warning-cleared-outline-active: var(--warning-color-600); --color-warning-cleared-background-hover: transparent; --color-warning-cleared-text-hover: var(--warning-color-300); --color-warning-cleared-border-hover: var(--warning-color-50); --color-warning-cleared-outline-hover: transparent; --color-warning-cleared-background-focus: transparent; --color-warning-cleared-text-focus: var(--warning-color-500); --color-warning-cleared-border-focus: transparent; --color-warning-cleared-outline-focus: var(--warning-color-300); } :root { --input-group-gap: 0.375rem; --input-group-text-color: var(--brand-color-200); --input-group-text-color-focus: var(--brand-color-500); --input-group-text-color-disabled: var(--gray-color-300); --input-group-text-animation: color 0.3s ease; } p { --input-group-feedback-horizontal-padding: .875rem; --input-group-feedback-font-weight: 400; --input-group-feedback-text-color-info: var(--gray-color-600); --input-group-feedback-text-color-success: var(--success-color-600); --input-group-feedback-text-color-warning: var(--warning-color-600); --input-group-feedback-text-color-error: var(--danger-color-600); } :root[data-theme=dark] { --input-group-text-color: var(--brand-color-50); --input-group-text-color-focus: var(--brand-color-100); --input-group-text-color-disabled: var(--gray-color-800); } input[type=checkbox] { /** BORDER **/ --check-border-radius: var(--radius-x-small); --check-border-width: 2px; --check-border-color: var(--gray-color-300); --check-border-color-focus: var(--brand-color-300); --check-border-color-checked: var(--brand-color-500); --check-border-color-disabled: var(--gray-color-100); --radius-x-small: 0.375rem; /** BACKGROUND **/ --check-background-color: transparent; --check-background-color-focus: var(--brand-color-25); --check-background-color-checked: var(--brand-color-25); --check-background-color-disabled: var(--gray-color-50); /** OUTLINE **/ --check-outline-width: 3px; --check-outline-color: transparent; --check-outline-color-focus: var(--brand-color-100); --check-outline-color-checked: var(--brand-color-100); --check-outline-color-disabled: transparent; /** DIMENSIONS **/ --check-width: 1.25rem; --check-height: var(--check-width); --check-padding: 0.125rem; /** MARK **/ --check-mark-width: 0.75rem; --check-mark-height: 0.65rem; /** TRANSITIONS **/ --check-border-transition: background-color 0.3s ease, border-color 0.3s ease, outline-color 0.3s ease; --check-mark-transition: opacity 0.3s ease, transform 0.3s ease; /** TEXT **/ --check-disabled-text-color: var(--gray-color-200); } :root[data-theme=dark] input[type=checkbox] { --check-background-color: var(--white-color); --check-background-color-focus: var(--brand-color-50); --check-background-color-checked: var(--brand-color-50); --check-background-color-disabled: var(--gray-color-50); --check-border-color: var(--gray-color-400); --check-border-color-focus: var(--brand-color-400); --check-border-color-checked: var(--brand-color-600); --check-border-color-disabled: var(--gray-color-200); --check-disabled-text-color: var(--gray-color-300); } input[type=radio] { /** BORDER **/ --radio-border-radius: 50%; --radio-border-width: 2px; --radio-border-color: var(--gray-color-300); --radio-border-color-focused: var(--brand-color-300); /** DIMENSIONS **/ --radio-width: 1.25rem; --radio-height: var(--radio-width); --radio-padding: 0.375rem; /** OUTLINE **/ --radio-outline-width: 3px; --radio-outline-color: transparent; --radio-outline-color-focused: var(--brand-color-100); /** MARK **/ --radio-mark-width: 0.5rem; --radio-mark-height: var(--radio-mark-width); --radio-mark-color: var(--brand-color-600); --radio-mark-color-disabled: var(--gray-color-600); /** TRANSITIONS **/ --radio-border-transition: border-color 0.3s ease; --radio-outline-transition: outline-color 0.3s ease; --radio-mark-transition: 0.15s transform ease-in-out; /** BACKGROUND **/ --radio-background-color: var(--white-color); --radio-background-color-checked: var(--brand-color-25); --radio-background-color-focused: var(--brand-color-25); --radio-background-color-disabled: var(--gray-color-50); } :root[data-theme=dark] input[type=radio] { --radio-border-color: var(--gray-color-700); --radio-outline-color: transparent; --radio-mark-color: var(--brand-color-500); --radio-background-color: var(--white-color); --radio-background-color-checked: var(--brand-color-50); --radio-border-color-focused: var(--brand-color-400); --radio-outline-color-focused: var(--brand-color-50); --radio-background-color-focused: var(--radio-background-color-checked); --radio-mark-color-disabled: var(--gray-color-100); --radio-background-color-disabled: var(--white-color); } label { /** TEXT COLORS **/ --label-text-color: var(--gray-color-800); --lebel-text-color-disabled: var(--gray-color-300); /** DIMENSIONS **/ --label-padding: 0.125rem 0 0.125rem 0.75rem; --label-sublabel-padding: 0.125rem 0 0 0; } :root { --label-wrapper-text-color-disabled: var(--gray-color-200); --label-wrapper-gap: 0.375rem; } input:not([type=submit]):not([type=checkbox]) { /** TRANSITION ANIMATION **/ --input-transition: border-color 0.3s ease, box-shadow 0.3s ease; /** BORDER **/ --input-border-radius: var(--radius-small); --input-border-color: var(--brand-color-200); --input-border-width: 2px; /** SHADOW **/ --input-box-shadow: 0 0 5px 1px var(--brand-color-25); --input-border-color-focus: var(--brand-color-500); --input-border-color-disabled: var(--gray-color-300); /** PADDINGS **/ --input-horizontal-padding: .875rem; --input-vertical-padding: .625rem; /** TEXT **/ --input-default-font-size: large; --input-text-color: var(--gray-color-300); --input-background-color: white; } :root[data-theme=dark] input:not([type=submit]):not([type=checkbox]) { --input-border-color: var(--brand-color-300); --input-border-color-focus: var(--brand-color-600); --input-border-color-disabled: var(--gray-color-400); --input-text-color: var(--gray-color-400); --input-background-color: var(--gray-color-700); } :root { --modal-card-border-radius: 1.625rem; --modal-card-shadow: 0 20px 24px -4px rgba(127, 139, 151, 0.1), 0 8px 8px -4px rgba(127, 139, 151, 0.1); --modal-card-animation: modal-card-animation 0.4s ease; --modal-card-title-color: var(--gray-color-800); --modal-card-content-color: var(--gray-color-600); --modal-card-padding: 1.5rem; --modal-card-content-padding: 0.5rem; --modal-card-background: white; /** SIZES **/ --modal-card-max-width-xs: 20rem; --modal-card-max-width-sm: 24rem; --modal-card-max-width-md: 28rem; --modal-card-max-width-lg: 32rem; --modal-card-max-width-xl: 36rem; --modal-card-max-width-2xl: 40rem; --modal-card-max-width-3xl: 48rem; --modal-card-max-width-4xl: 56rem; --modal-card-background-color-first-circle-brand: var(--brand-color-25); --modal-card-background-color-second-circle-brand: var(--brand-color-50); --modal-card-icon-color-brand: var(--brand-color-500); --modal-card-background-color-first-circle-gray: var(--gray-color-25); --modal-card-background-color-second-circle-gray: var(--gray-color-50); --modal-card-icon-color-gray: var(--gray-color-500); --modal-card-background-color-first-circle-success: var(--success-color-25); --modal-card-background-color-second-circle-success: var(--success-color-50); --modal-card-icon-color-success: var(--success-color-500); --modal-card-background-color-first-circle-danger: var(--danger-color-25); --modal-card-background-color-second-circle-danger: var(--danger-color-50); --modal-card-icon-color-danger: var(--danger-color-500); --modal-card-background-color-first-circle-warning: var(--warning-color-25); --modal-card-background-color-second-circle-warning: var(--warning-color-50); --modal-card-icon-color-warning: var(--warning-color-500); } :root[data-theme=dark] { --modal-card-background: var(--brand-color-1000); --modal-card-title-color: var(--brand-color-200); --modal-card-content-color: var(--gray-color-300); --modal-card-background-color-first-circle-brand: var(--brand-color-200); --modal-card-background-color-second-circle-brand: var(--brand-color-300); --modal-card-icon-color-brand: var(--brand-color-25); --modal-card-background-color-first-circle-gray: var(--gray-color-200); --modal-card-background-color-second-circle-gray: var(--gray-color-300); --modal-card-icon-color-gray: var(--gray-color-25); --modal-card-background-color-first-circle-success: var(--success-color-200); --modal-card-background-color-second-circle-success: var(--success-color-300); --modal-card-icon-color-success: var(--success-color-25); --modal-card-background-color-first-circle-danger: var(--danger-color-200); --modal-card-background-color-second-circle-danger: var(--danger-color-300); --modal-card-icon-color-danger: var(--danger-color-25); --modal-card-background-color-first-circle-warning: var(--warning-color-200); --modal-card-background-color-second-circle-warning: var(--warning-color-300); --modal-card-icon-color-warning: var(--warning-color-25); } @keyframes modal-card-animation { 0% { transform: translateY(20%); } 100% { transform: translateY(0); } } :root { --dialog-card-animation: dialog-card-animation 0.3s ease; --dialog-card-width: 400px; --dialog-header-gap: 1.25rem; --dialog-card-margin-top: 2rem; --dialog-card-background-color: var(--white-color); } :root[data-theme=dark] { --dialog-card-background-color: var(--gray-color-1200); } @keyframes dialog-card-animation { 0% { transform: translateY(-20%); } 100% { transform: translateY(0); } } :root { --toast-card-width: 496px; --toast-card-radius: var(--radius-medium); --toast-card-padding: 1rem 1.5rem 1rem 1rem; --toast-card-animation: toast-card-animation .2s ease; --toast-card-hide-animation: toast-card-hide-animation .5s ease-in-out; --toast-card-content-gap: .75rem; --toast-card-wrapper-padding: 1rem 0 0 0; --toast-card-wrapper-gap: 1rem; --toast-card-icon-size: 1rem; --toast-card-text-color-default: var(--gray-color-600); --toast-text-color-brand: var(--brand-color-600); --toast-card-background-color-brand: var(--brand-color-25); --toast-card-border-color-brand: var(--brand-color-400); --toast-text-color-gray: var(--gray-color-600); --toast-card-background-color-gray: var(--gray-color-25); --toast-card-border-color-gray: var(--gray-color-400); --toast-text-color-success: var(--success-color-600); --toast-card-background-color-success: var(--success-color-25); --toast-card-border-color-success: var(--success-color-400); --toast-text-color-danger: var(--danger-color-600); --toast-card-background-color-danger: var(--danger-color-25); --toast-card-border-color-danger: var(--danger-color-400); --toast-text-color-warning: var(--warning-color-600); --toast-card-background-color-warning: var(--warning-color-25); --toast-card-border-color-warning: var(--warning-color-400); } :root[data-theme=dark] { --toast-card-text-color-default: var(--gray-color-25); --toast-text-color-brand: var(--brand-color-25); --toast-card-background-color-brand: var(--brand-color-400); --toast-card-border-color-brand: var(--brand-color-600); --toast-text-color-gray: var(--gray-color-25); --toast-card-background-color-gray: var(--gray-color-400); --toast-card-border-color-gray: var(--gray-color-600); --toast-text-color-success: var(--success-color-25); --toast-card-background-color-success: var(--success-color-400); --toast-card-border-color-success: var(--success-color-600); --toast-text-color-danger: var(--danger-color-25); --toast-card-background-color-danger: var(--danger-color-400); --toast-card-border-color-danger: var(--danger-color-600); --toast-text-color-warning: var(--warning-color-25); --toast-card-background-color-warning: var(--warning-color-400); --toast-card-border-color-warning: var(--warning-color-600); } @keyframes toast-card-animation { 0% { transform: translateY(-50%); opacity: 0; } 75% { transform: translateY(0.25rem); opacity: 0.75; } 100% { transform: translateY(0); opacity: 1; } } @keyframes toast-card-hide-animation { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(50%); } } ul, li { /** BORDER **/ --list-border-radius: var(--radius-small); --list-border-color: var(--gray-color-200); --list-border-width: 2px; /** PADDING **/ --list-item-padding-horizontal: 0.875rem; --list-item-padding-vertical: 0.625rem; --list-item-gap: 0.5rem; /** COLOR **/ --list-background-color-hover: var(--gray-color-25); --list-background-color: white; /** SHADOW **/ --list-shadow: 0px 12px 16px -4px rgba(127, 139, 151, 0.1), 0px 4px 6px -2px rgba(127, 139, 151, 0.05); /** ANIMATION **/ --list-item-hover-animation: background-color .3s ease; } :root[data-theme=dark] ul, :root[data-theme=dark] li { --list-border-color: var(--dropdown-border-color); --list-background-color-hover: var(--gray-color-900); --list-background-color: var(--gray-color-1000); } :root { /** PADDING **/ --dropdown-padding-horizontal: .875rem; --dropdown-padding-vertical: .625rem; --dropdown-gap: 12px; --dropdown-svg-gap: .5rem; /** BORDER **/ --dropdown-border-radius: var(--radius-small); --dropdown-border-color: var(--gray-color-200); --dropdown-border-width: 2px; /** COLOR **/ --dropdown-text-color: var(--gray-color-700); --dropdown-border-color-focused: var(--brand-color-600); --dropdown-background-color: white; --dropdown-box-shadow-color: var(--brand-color-25); /** ANIMATION **/ --dropdown-options-animation: growDown .35s ease-in-out forwards; --dropdown-input-animation: box-shadow 0.3s ease, border-color 0.3s ease; --dropdown-input-icon-animation: transform 0.3s ease, background-color 0.3s ease; --dropdown-item-icon-animation: opacity .3s ease; /** SIZE **/ --dropdown-svg-size: 1.25rem; } :root[data-theme=dark] { --dropdown-text-color: var(--gray-color-25); --dropdown-border-color-focused: var(--brand-color-700); --dropdown-background-color: var(--gray-color-1000); --dropdown-border-color: var(--brand-color-300); --dropdown-box-shadow-color: var(--brand-color-50); } @keyframes growDown { 0% { transform: scaleY(0); } 80% { transform: scaleY(1.1); } 100% { transform: scaleY(1); } } :root { /** SIZES **/ --spinner-container-size: 4rem; --spinner-icon-height: 1.875rem; --spinner-icon-width: 2.375rem; /** ANIMATION **/ --spinner-animation-delay: .5s; --spinner-icon-animation: fade-in 0.5s ease-in forwards, orbit 1.5s linear infinite; /** COLORS **/ --spinner-color: var(--brand-color-500); } :root[data-theme=dark] { --spinner-color: var(--brand-color-300); } @keyframes orbit { 0% { transform: translate(-50%, -50%) rotate(0deg) translate(1.5rem, 0) rotate(95deg) scale(0.33); } 25% { transform: translate(-50%, -50%) rotate(90deg) translate(1.5rem, 0) rotate(95deg) scale(0.66); } 50% { transform: translate(-50%, -50%) rotate(180deg) translate(1.5rem, 0) rotate(95deg) scale(1.5); } 100% { transform: translate(-50%, -50%) rotate(360deg) translate(1.5rem, 0) rotate(95deg) scale(0.33); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } :root { /** COLORS **/ --card-background-color: var(--gray-color-25); --card-title-color: black; --card-text-color: var(--brand-color-200); /** RADIUS **/ --card-border-radius: 2.25rem; /** SHADOW **/ --card-shadow: 0 20px 24px -4px rgba(127, 139, 151, 0.1), 0 8px 8px -4px rgba(127, 139, 151, 0.1); /** PADDINGS **/ --card-padding-vertical: 2.125rem; --card-padding-horizontal: 1.875rem; /** GAP **/ --card-gap: 1rem; /** HEIGHT **/ --card-min-height: 240px; /** ASPECT RATIO **/ --card-image-aspect-ratio: 315 / 240; } :root[data-theme=dark] { --card-background-color: var(--gray-color-1000); --card-title-color: var(--gray-color-25); --card-text-color: var(--brand-color-300); } ul { /** RADIUS **/ --tabs-border-radius: 1rem; --tabs-icon-only-radius: 2.25rem; } li { /** PADDINGS **/ --tabs-item-vertical-padding: 1.125rem; --tabs-item-horizontal-padding: 1rem; } button { /** COLORS **/ --tabs-button-background-color: var(--brand-color-25); --tabs-button-background-color-hover: var(--brand-color-50); --tabs-button-background-color-active: var(--brand-color-100); --tabs-button-background-color-disabled: var(--gray-color-100); --tabs-button-text-color: var(--brand-color-500); --tabs-button-text-color-hover: var(--brand-color-500); --tabs-button-text-color-active: var(--white-color); --tabs-button-text-color-disabled: var(--gray-color-700); } :root[data-theme=dark] button { --tabs-button-background-color: var(--brand-color-500); --tabs-button-background-color-hover: var(--brand-color-600); --tabs-button-background-color-active: var(--brand-color-700); --tabs-button-background-color-disabled: var(--gray-color-800); --tabs-button-text-color: var(--brand-color-25); --tabs-button-text-color-hover: var(--brand-color-50); --tabs-button-text-color-active: var(--brand-color-100); --tabs-button-text-color-disabled: var(--gray-color-900); } :root { /** COLORS **/ --accordion-text-color: var(--gray-color-800); --accordion-color-disabled: var(--gray-color-300); --accordion-icon-color: var(--brand-color-600); /** PADDINGS **/ --accordion-padding-horizontal: .875rem; --accordion-padding-vertical: .75rem; /** BORDERS **/ --accordion-border-color: var(--brand-color-200); --accordion-border-width: 2px; --accordion-border: var(--accordion-border-width) solid var(--accordion-border-color); --accordion-border-radius: .75rem; /** ANIMATIONS **/ --accordion-icon-animation: transform 0.3s ease, background-color 0.3s ease; --accordion-content-border-animation: opacity 0.3s ease-in-out; --accordion-wrapper-animation: all .3s ease; } :root[data-theme=dark] { --accordion-text-color: var(--gray-color-900); --accordion-color-disabled: var(--gray-color-400); --accordion-icon-color: var(--brand-color-700); --accordion-border-color: var(--brand-color-300); } :root { --accordion-group-margin: calc(var(--accordion-border-width) * -1); } :root { /** ANIMATIONS **/ --backdrop-show-animation: backdrop-show-animation .3s ease-in-out forwards; --backdrop-hide-animation: backdrop-hide-animation .3s ease-in-out forwards; } @keyframes backdrop-show-animation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes backdrop-hide-animation { 0% { opacity: 1; } 100% { opacity: 0; } } :root { /** COLORS **/ --progress-bar-background-color: var(--gray-color-25); --progress-bar-text-color: var(--brand-color-100); --progress-bar-filler-color: var(--brand-color-500); /** RADIUS **/ --progress-radius: .5rem; --progress-filler-radius: var(--progress-radius); /** SIZES **/ --progress-bar-height: .5rem; --progress-bar-filler-height: 100%; /** ANIMATION **/ --progress-bar-fill-animation: width 1s ease-in-out; /** GAP **/ --progress-bar-gap: .75rem; /** FONT **/ --progress-bar-font-weight: 600; } :root[data-theme=dark] { --progress-bar-background-color: var(--brand-color-1000); --progress-bar-text-color: var(--brand-color-300); --progress-bar-filler-color: var(--brand-color-300); } :root { --text-color: black; } :root[data-theme=dark] { --text-color: var(--brand-color-25); } html { --font-size: 16px; } html[data-accessible=true] { --font-size: 20px; } :root { --popover-gap: .325rem; --popover-content-background-color: var(--gray-color-25); /** PADDING **/ --popover-content-padding-horizontal: .875rem; --popover-content-padding-vertical: .625rem; /** BORDER **/ --popover-content-border-radius: var(--radius-small); --popover-animation: popover-animation .3s ease; } :root[data-theme=dark] { --popover-content-background-color: var(--gray-color-900); } @keyframes popover-animation { 0% { opacity: 0; } 100% { opacity: 1; } } header { /** COLORS **/ --header-background-color: var(--brand-color-500); --header-gray-background-color: var(--gray-color-500); --header-text-color: var(--white-color); /** BORDERS **/ --header-border-radius: var(--radius-medium); /** PADDINGS **/ --header-padding-vertical: 1.185em; --header-padding-horizontal: 4em; --header-floating-margin: 2rem; } header[data-theme=dark] { --header-background-color: var(--brand-color-600); --header-gray-background-color: var(--gray-color-600); } footer { /** COLORS **/ --footer-background-color: var(--brand-color-500); --footer-gray-background-color: var(--gray-color-500); --footer-text-color: var(--white-color); /** BORDERS **/ --footer-border-radius: var(--radius-medium); /** PADDINGS **/ --footer-padding-vertical: 1.185em; --footer-padding-horizontal: 4em; --footer-floating-margin: 2rem; } footer[data-theme=dark] { --footer-background-color: var(--brand-color-600); --footer-gray-background-color: var(--gray-color-600); } svg { --icon-size: 1em; } :root { /** RADIUS **/ --radius-small: .75rem; --radius-medium: 1rem; --radius-large: 2.25rem; --radius-full: 50%; /** PADDING **/ --container-padding: 2rem; /** CONTAINER **/ --container-width-xs: calc(100% - calc(var(--container-padding) * 2)); --container-width-sm: 540px; --container-width-md: 720px; --container-width-lg: 960px; --container-width-xl: 1140px; --container-width-xxl: 1320px; } .bast-input-group { display: flex; flex-direction: column; gap: var(--input-group-gap); } .bast-input-group__feedback { padding-left: var(--input-group-feedback-horizontal-padding); color: var(--input-group-feedback-text-color-info); font-weight: var(--input-group-feedback-font-weight); } .bast-input-group .feedback--error { color: var(--input-group-feedback-text-color-error); } .bast-input-group .feedback--success { color: var(--input-group-feedback-text-color-success); } .bast-input-group .feedback--warning { color: var(--input-group-feedback-text-color-warning); } .bast-input-group__label { color: var(--input-group-text-color); transition: var(--input-group-text-animation); } .bast-input-group__label:has(+ .bast-input:disabled) { color: var(--input-group-text-color-disabled); } .bast-input-group__label:has(+ .bast-input:focus), .bast-input-group__label:has(+ .bast-input:focus-visible) { color: var(--input-group-text-color-focus); } .bast-check { appearance: none; -webkit-appearance: none; cursor: pointer; outline-offset: 0; position: relative; display: flex; align-content: center; justify-content: center; background-color: var(--check-background-color); width: var(--check-width); height: var(--check-height); min-width: var(--check-width); min-height: var(--check-height); outline: var(--check-outline-color); padding: var(--check-padding); transition: var(--check-border-transition); border-radius: var(--check-border-radius); border-color: var(--check-border-color); border-width: var(--check-border-width); border-style: solid; } .bast-check::before { top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: var(--check-mark-width); height: var(--check-mark-height); opacity: 0; position: absolute; transition: var(--check-mark-transition); background-image: url('data:image/svg+xml,'); background-size: contain; background-repeat: no-repeat; background-position: center; } .bast-check:disabled::before { background-image: url('data:image/svg+xml,'); } .bast-check:focus, .bast-check:focus-visible { --outline-color: var(--check-outline-color-focus); --border-color: var(--check-border-color-focus); --background-color: var(--check-background-color-focus); border-color: var(--border-color); background-color: var(--background-color); outline-width: var(--check-outline-width); outline-color: var(--outline-color); outline-style: solid; } .bast-check:checked { --outline-color: var(--check-outline-color-checked); --border-color: var(--check-border-color-checked); --background-color: var(--check-background-color-checked); border-color: var(--border-color); background-color: var(--background-color); outline-width: var(--check-outline-width); outline-color: var(--outline-color); outline-style: solid; } .bast-check:checked:not(:focus) { outline: var(--check-outline-color); } .bast-check:disabled { cursor: default; background-color: var(--check-background-color-disabled); border-color: var(--check-border-color-disabled); outline: var(--check-outline-color-disabled); } .bast-check:checked::before { opacity: 1; } .bast-check-wrapper { display: flex; } .bast-check-wrapper--disabled { color: var(--check-disabled-text-color); } .bast-radio { -webkit-appearance: none; appearance: none; font: inherit; display: grid; place-content: center; outline-style: solid; outline-width: var(--radio-outline-width); outline-color: var(--radio-outline-color); width: var(--radio-width); min-width: var(--radio-width); height: var(--radio-height); min-height: var(--radio-height); border: var(--radio-border-width) solid var(--radio-border-color); border-radius: var(--radio-border-radius); transition: var(--radio-outline-transition), var(--radio-border-transition); background-color: var(--radio-background-color); } .bast-radio:checked { background-color: var(--radio-background-color-checked); } .bast-radio:disabled { background-color: var(--radio-background-color-disabled); } .bast-radio::before { content: ""; width: var(--radio-mark-width); height: var(--radio-mark-height); border-radius: var(--radio-border-radius); transform: scale(0); transition: var(--radio-mark-transition); background-color: var(--radio-mark-color); } .bast-radio:disabled::before { background-color: var(--radio-mark-color-disabled); } .bast-radio:checked::before { transform: scale(1); } .bast-radio:focus, .bast-radio:focus-visible { background-color: var(--radio-background-color-focused); border-color: var(--radio-border-color-focused); outline-color: var(--radio-outline-color-focused); outline-offset: 0; } .label { --text-color: var(--label-text-color); padding: var(--label-padding); -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; cursor: pointer; text-align: left; } .label--disabled { --text-color: var(--lebel-text-color-disabled); cursor: default; } .label .sublabel { font-weight: normal; padding-top: var(--label-sublabel-padding); } .label .sublabel--disabled { cursor: default; } .label-wrapper { display: flex; } .label-wrapper--disabled { --text-color: var(--label-wrapper-text-color-disabled); } .label-wrapper--top { flex-direction: column-reverse; gap: var(--label-wrapper-gap); } .label-wrapper--top .label { padding-left: 0; } .modal-card { border-radius: var(--modal-card-border-radius); background-color: var(--modal-card-background); box-shadow: var(--modal-card-shadow); width: 100%; height: fit-content; } .modal-card--auto { min-width: min(100vw - var(--modal-card-padding) * 2, var(--modal-card-max-width-xs)); width: fit-content; } .modal-card--xs { max-width: var(--modal-card-max-width-xs); } .modal-card--sm { max-width: var(--modal-card-max-width-sm); } .modal-card--md { max-width: var(--modal-card-max-width-md); } .modal-card--lg { max-width: var(--modal-card-max-width-lg); } .modal-card--xl { max-width: var(--modal-card-max-width-xl); } .modal-card--2xl { max-width: var(--modal-card-max-width-2xl); } .modal-card--3xl { max-width: var(--modal-card-max-width-3xl); } .modal-card--4xl { max-width: var(--modal-card-max-width-4xl); } .modal-card--5xl { max-width: var(); } .modal-card--full { height: calc(100% - var(--container-padding) * 2); width: 100%; } @media (min-width: 576px) { .modal-card--full { max-width: var(--container-width-sm); } } @media (min-width: 768px) { .modal-card--full { max-width: var(--container-width-md); } } @media (min-width: 992px) { .modal-card--full { max-width: var(--container-width-lg); } } @media (min-width: 1200px) { .modal-card--full { max-width: var(--container-width-xl); } } @media (min-width: 1400px) { .modal-card--full { max-width: var(--container-width-xxl); } } .modal-card__title { color: var(--modal-card-title-color); } .modal-card__header { padding: var(--modal-card-padding); text-align: center; display: flex; gap: 2rem; flex-direction: column; justify-content: center; align-items: center; font-weight: 500; } .modal-card__footer { padding: 1.5rem; } .modal-card__content { padding: var(--modal-card-content-padding) var(--modal-card-padding); color: var(--modal-card-content-color); font-weight: 400; } .modal-card__icon { border-radius: 50%; padding: var(--modal-card-padding); display: flex; align-items: center; justify-content: center; position: relative; } .modal-card__icon::before { top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; border-radius: var(--radius-full); position: absolute; width: calc(100% - var(--modal-card-padding)); height: calc(100% - var(--modal-card-padding)); } .modal-card__icon svg { z-index: 2; height: 1.5rem; width: 1.5rem; } .modal-card__icon--brand { background-color: var(--modal-card-background-color-first-circle-brand); } .modal-card__icon--brand::before { background-color: var(--modal-card-background-color-second-circle-brand); } .modal-card__icon--brand svg { color: var(--modal-card-icon-color-brand); } .modal-card__icon--gray { background-color: var(--modal-card-background-color-first-circle-gray); } .modal-card__icon--gray::before { background-color: var(--modal-card-background-color-second-circle-gray); } .modal-card__icon--gray svg { color: var(--modal-card-icon-color-gray); } .modal-card__icon--success { background-color: var(--modal-card-background-color-first-circle-success); } .modal-card__icon--success::before { background-color: var(--modal-card-background-color-second-circle-success); } .modal-card__icon--success svg { color: var(--modal-card-icon-color-success); } .modal-card__icon--danger { background-color: var(--modal-card-background-color-first-circle-danger); } .modal-card__icon--danger::before { background-color: var(--modal-card-background-color-second-circle-danger); } .modal-card__icon--danger svg { color: var(--modal-card-icon-color-danger); } .modal-card__icon--warning { background-color: var(--modal-card-background-color-first-circle-warning); } .modal-card__icon--warning::before { background-color: var(--modal-card-background-color-second-circle-warning); } .modal-card__icon--warning svg { color: var(--modal-card-icon-color-warning); } .modal { position: relative; display: flex; flex-direction: column; align-self: center; } .modal--active { animation: var(--modal-card-animation); } .modal__close-button { position: absolute; top: 1.5rem; right: 1.5rem; } .modal__close-button svg { color: var(--brand-color-600); } .dialog { width: min(100% - var(--modal-card-padding) * 2, var(--dialog-card-width)); animation: var(--dialog-card-animation); align-self: start; margin-top: var(--dialog-card-margin-top); background-color: var(--dialog-card-background-color); } .dialog__header { text-align: start; align-items: start; gap: var(--dialog-header-gap); padding-bottom: 0; } .dialog__content { text-align: start; align-items: start; } .toast { color: var(--toast-card-text-color-default); border-radius: var(--toast-card-radius); padding: var(--toast-card-padding); display: flex; align-items: center; gap: var(--toast-card-content-gap); width: 100%; cursor: pointer; animation: var(--toast-card-hide-animation); opacity: 0; } .toast--visible { opacity: 1; animation: var(--toast-card-animation); } .toast svg { height: var(--toast-card-icon-size); width: var(--toast-card-icon-size); min-width: var(--toast-card-icon-size); } .toast--brand { --toast-text-color: var(--toast-text-color-brand); background-color: var(--toast-card-background-color-brand); border: 1px solid var(--toast-card-border-color-brand); color: var(--toast-text-color); } .toast--brand h5 { color: var(--toast-text-color); } .toast--brand .bast-button.toast__close-button { margin-left: auto; padding: 0; border: none; outline: none; } .toast--brand .bast-button.toast__close-button svg { color: var(--toast-text-color); } .toast--gray { --toast-text-color: var(--toast-text-color-gray); background-color: var(--toast-card-background-color-gray); border: 1px solid var(--toast-card-border-color-gray); color: var(--toast-text-color); } .toast--gray h5 { color: var(--toast-text-color); } .toast--gray .bast-button.toast__close-button { margin-left: auto; padding: 0; border: none; outline: none; } .toast--gray .bast-button.toast__close-button svg { color: var(--toast-text-color); } .toast--success { --toast-text-color: var(--toast-text-color-success); background-color: var(--toast-card-background-color-success); border: 1px solid var(--toast-card-border-color-success); color: var(--toast-text-color); } .toast--success h5 { color: var(--toast-text-color); } .toast--success .bast-button.toast__close-button { margin-left: auto; padding: 0; border: none; outline: none; } .toast--success .bast-button.toast__close-button svg { color: var(--toast-text-color); } .toast--danger { --toast-text-color: var(--toast-text-color-danger); background-color: var(--toast-card-background-color-danger); border: 1px solid var(--toast-card-border-color-danger); color: var(--toast-text-color); } .toast--danger h5 { color: var(--toast-text-color); } .toast--danger .bast-button.toast__close-button { margin-left: auto; padding: 0; border: none; outline: none; } .toast--danger .bast-button.toast__close-button svg { color: var(--toast-text-color); } .toast--warning { --toast-text-color: var(--toast-text-color-warning); background-color: var(--toast-card-background-color-warning); border: 1px solid var(--toast-card-border-color-warning); color: var(--toast-text-color); } .toast--warning h5 { color: var(--toast-text-color); } .toast--warning .bast-button.toast__close-button { margin-left: auto; padding: 0; border: none; outline: none; } .toast--warning .bast-button.toast__close-button svg { color: var(--toast-text-color); } .toast__wrapper { position: absolute; top: 0; padding: var(--toast-card-wrapper-padding); left: 50%; transform: translateX(-50%); width: min(100% - var(--modal-card-padding) * 2, var(--toast-card-width)); display: flex; flex-direction: column; gap: var(--toast-card-wrapper-gap); z-index: 9999; } /** Расчеты значения clam расчитывались с помощью ресурса https://min-max-calculator.9elements.com/ - min-viewport = 576px; - max-viewport = 1920px; */ *:not(html) { --font-size-min: .75rem; --font-size-max: 1rem; --font-size-prefer: 0.643rem + 0.3vw; font-size: clamp(var(--font-size-min), var(--font-size-prefer), var(--font-size-max)); } html { font-size: var(--font-size); } h1 { --font-size-min: 1.625rem; --font-size-max: 2.5rem; --font-size-prefer: 1.25rem + 1.04vw; } h2 { --font-size-min: 1.25rem; --font-size-max: 1.875rem; --font-size-prefer: 0.982rem + 0.74vw; } h3 { --font-size-min: 1rem; --font-size-max: 1.5rem; --font-size-prefer: 0.786rem + 0.6vw; } h4 { --font-size-min: 0.875rem; --font-size-max: 1.125rem; --font-size-prefer: 0.768rem + 0.3vw; } h5 { --font-size-min: 0.688rem; --font-size-max: 0.875rem; --font-size-prefer: 0.607rem + 0.22vw; } q { --font-size-min: 1rem; --font-size-max: 1.25rem; --font-size-prefer: 0.893rem + 0.3vw; } h1, h2, h3, h4, h5, q, p, label { color: var(--text-color); } .container { max-width: var(--container-width-xs); margin: 0 auto; width: 100%; } @media (min-width: 576px) { .container { max-width: var(--container-width-sm); } } @media (min-width: 768px) { .container { max-width: var(--container-width-md); } } @media (min-width: 992px) { .container { max-width: var(--container-width-lg); } } @media (min-width: 1200px) { .container { max-width: var(--container-width-xl); } } @media (min-width: 1400px) { .container { max-width: var(--container-width-xxl); } } .container--fluid { max-width: 100%; } .bast-input { --font-size-min: 1rem; --font-size-max: 1rem; --font-size-prefer: 1rem; border-radius: var(--input-border-radius); border-color: var(--input-border-color); border-width: var(--input-border-width); border-style: solid; padding: var(--input-vertical-padding) var(--input-horizontal-padding); color: var(--input-text-color); outline: none; transition: var(--input-transition); background-color: var(--input-background-color); } .bast-input:focus + .bast-input-group__label, .bast-input:focus-visible { border-color: var(--input-border-color-focus); box-shadow: var(--input-box-shadow); } .bast-input:disabled { border-color: var(--input-border-color-disabled); } .bast-input::placeholder { color: var(--input-text-color); } .list { list-style: none; border-radius: var(--list-border-radius); border-color: var(--list-border-color); border-width: var(--list-border-width); border-style: solid; overflow: hidden; display: flex; flex-direction: column; height: min-content; box-shadow: var(--list-shadow); background-color: var(--list-background-color); } .list--inset { border: none; box-shadow: none; background-color: transparent; } .list--inset .list__item:hover { background-color: transparent; opacity: 0.7; } .list__item { text-decoration: none; display: flex; gap: var(--list-item-gap); padding: var(--list-item-padding-vertical) var(--list-item-padding-horizontal); transition: var(--list-item-hover-animation); color: var(--dropdown-text-color); align-items: center; } .list__item svg { color: var(--dropdown-text-color); } .list__item:hover { background-color: var(--list-background-color-hover); } .dropdown { position: relative; height: fit-content; } .dropdown__label { display: flex; flex-direction: column; gap: var(--input-group-gap); color: var(--input-group-text-color); transition: var(--input-group-text-animation); } .dropdown:has(input:disabled) { color: var(--input-group-text-color-disabled); } .dropdown:has(input:checked) { color: var(--input-group-text-color-focus); } .dropdown__input { --font-size-min: 1rem; --font-size-max: 1rem; --font-size-prefer: 1rem; display: flex; justify-content: space-between; align-items: center; user-select: none; cursor: pointer; padding: var(--dropdown-padding-vertical) var(--dropdown-padding-horizontal); color: var(--dropdown-text-color); border-radius: var(--dropdown-border-radius); border-color: var(--dropdown-border-color); border-width: var(--dropdown-border-width); border-style: solid; transition: var(--dropdown-input-animation); overflow: hidden; background-color: var(--dropdown-background-color); } .dropdown__input__text { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown__input__icon { height: var(--dropdown-svg-size); width: var(--dropdown-svg-size); min-width: var(--dropdown-svg-size); margin-left: var(--dropdown-svg-gap); transition: var(--dropdown-input-icon-animation); } .dropdown:has(input:focus) .dropdown__input, .dropdown:has(input:checked) .dropdown__input { border-color: var(--dropdown-border-color-focused); box-shadow: 0 0 5px 1px var(--dropdown-box-shadow-color); } .dropdown:has(input:checked) .dropdown__input__icon { transform: rotate(180deg); color: var(--dropdown-border-color-focused); } .dropdown:has(input:checked) ul.list { display: block; } .dropdown__item { user-select: none; cursor: pointer; display: flex; align-items: center; } .dropdown__item__icon { opacity: 0; margin-left: auto; transition: var(--dropdown-item-icon-animation); color: var(--dropdown-border-color-focused); } .dropdown__item__icon--visible { opacity: 1; } .dropdown__item:hover .dropdown__item__icon { opacity: 1; } .dropdown ul.list { position: absolute; width: 100%; top: calc(100% + var(--dropdown-gap)); z-index: 2; background-color: var(--dropdown-background-color); display: none; transform-origin: top center; animation: var(--dropdown-options-animation); } .dropdown__checkbox { display: none; } .spinner { position: relative; height: var(--spinner-container-size); width: var(--spinner-container-size); } .spinner__icon { color: var(--spinner-color); position: absolute; width: var(--spinner-icon-width); height: var(--spinner-icon-height); top: 50%; left: 50%; transform-origin: center; opacity: 0; animation: var(--spinner-icon-animation); } .spinner__icon:nth-child(2) { animation-delay: var(--spinner-animation-delay); } .spinner__icon:nth-child(3) { animation-delay: calc(2 * var(--spinner-animation-delay)); } .card { background-color: var(--card-background-color); border-radius: var(--card-border-radius); display: flex; flex-direction: column; gap: var(--card-gap); overflow: hidden; box-shadow: var(--card-shadow); max-height: min-content; } .card__title { padding: 0 var(--card-padding-horizontal); color: var(--card-title-color); text-transform: uppercase; } .card__image { max-height: 100%; max-width: 100%; object-fit: contain; } .card__image-wrapper { aspect-ratio: var(--card-image-aspect-ratio); display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; pointer-events: none; user-select: none; } .card:not(:has(img)) .card__title { padding-top: var(--card-padding-vertical); } .card__content { padding: 0 var(--card-padding-horizontal) var(--card-padding-vertical) var(--card-padding-horizontal); color: var(--card-text-color); } .tabs { display: flex; width: fit-content; overflow: hidden; } .tabs--round-all { border-radius: var(--tabs-border-radius); } .tabs--round-top { border-radius: var(--tabs-border-radius) var(--tabs-border-radius) 0 0; } .tabs--round-bottom { border-radius: 0 0 var(--tabs-border-radius) var(--tabs-border-radius); } .tabs--icon-only { border-radius: var(--tabs-icon-only-radius); } .tabs__item { list-style-type: none; } .tabs__item .tabs__button { border-radius: 0; outline: none; transition: var(--button-transition); } .tabs__item .tabs__button:hover { color: var(--tabs-button-text-color-hover); background-color: var(--tabs-button-background-color-hover); } .tabs__item .tabs__button:active, .tabs__item .tabs__button:focus-visible, .tabs__item .tabs__button--selected { color: var(--tabs-button-text-color-active); background-color: var(--tabs-button-background-color-active); } .tabs__button { color: var(--tabs-button-text-color); background-color: var(--tabs-button-background-color); border: none; padding: var(--tabs-item-vertical-padding) var(--tabs-item-horizontal-padding); display: flex; align-items: center; justify-content: center; cursor: pointer; } .tabs button:disabled.tabs__button, .tabs button:disabled.tabs__button:hover { cursor: default; background-color: var(--tabs-button-background-color-disabled); color: var(--tabs-button-text-color-disabled); } .accordion { display: flex; flex-direction: column; border-radius: var(--accordion-border-radius); border: var(--accordion-border); height: fit-content; } .accordion:has(input:disabled) { border-color: var(--accordion-color-disabled); } .accordion:has(input:disabled) .accordion__title, .accordion:has(input:disabled) .accordion__content { cursor: default; color: var(--accordion-color-disabled); } .accordion:has(input:disabled) .accordion__title { border-color: var(--accordion-color-disabled); } .accordion:has(input:disabled) .accordion__title:hover { color: var(--accordion-color-disabled); opacity: 1; } .accordion:has(input:disabled) .accordion__icon { color: var(--accordion-color-disabled); } .accordion:has(input:disabled) .accordion__content-wrapper::after { background-color: var(--accordion-color-disabled); } .accordion:has(input:checked) .accordion__icon { transform: rotate(180deg); } .accordion:has(input:checked) .accordion__content { border-color: var(--brand-color-200); } .accordion__icon { height: var(--dropdown-svg-size); width: var(--dropdown-svg-size); min-width: var(--dropdown-svg-size); margin-left: var(--dropdown-svg-gap); transition: var(--dropdown-input-icon-animation); color: var(--accordion-icon-color); } .accordion__title { cursor: pointer; color: var(--accordion-text-color); padding: var(--accordion-padding-vertical) var(--accordion-padding-horizontal); transition: opacity 0.3s ease; display: flex; justify-content: space-between; align-items: center; } .accordion__title:hover { opacity: 0.7; } .accordion__content { color: var(--accordion-text-color); } .accordion__content-wrapper { transform-origin: top; transition: var(--accordion-wrapper-animation); overflow: hidden; position: relative; } .accordion__content-wrapper::after { content: ""; position: absolute; height: var(--accordion-border-width); background-color: var(--accordion-border-color); top: 0; width: 100%; opacity: 0; transition: var(--accordion-content-border-animation); } .accordion__content-wrapper--expanded::after { opacity: 1; } .accordion__input { display: none; } .accordion-group { width: 100%; display: flex; flex-direction: column; } .accordion-group--disabled.accordion-group .accordion:has(input:disabled) { border-color: var(--accordion-color-disabled); } .accordion-group .accordion { border-radius: 0; } .accordion-group .accordion:has(input:disabled) { border-color: var(--accordion-border-color); } .accordion-group .accordion:not(:first-child) { border-top: 0; } .accordion-group .accordion:first-child { border-top-left-radius: var(--accordion-border-radius); border-top-right-radius: var(--accordion-border-radius); } .accordion-group .accordion:last-child { border-bottom-left-radius: var(--accordion-border-radius); border-bottom-right-radius: var(--accordion-border-radius); } .progress { height: var(--progress-bar-height); width: 100%; background-color: var(--progress-bar-background-color); border-radius: var(--progress-radius); } .progress__wrapper { display: flex; width: 100%; align-items: center; gap: var(--progress-bar-gap); } .progress__label { color: var(--progress-bar-text-color); font-weight: var(--progress-bar-font-weight); } .progress__filler { background-color: var(--progress-bar-filler-color); height: var(--progress-bar-filler-height); width: 0; border-radius: var(--progress-filler-radius); transition: var(--progress-bar-fill-animation); } .backdrop { background-color: rgba(0, 0, 0, 0.5); z-index: 2; opacity: 0; animation: var(--backdrop-hide-animation); pointer-events: none; position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; display: grid; justify-items: center; } .backdrop--active { opacity: 1; pointer-events: visible; animation: var(--backdrop-show-animation); } .popover { width: fit-content; height: fit-content; position: relative; } .popover__content { position: absolute; z-index: 1; background-color: var(--popover-content-background-color); border-radius: var(--popover-content-border-radius); opacity: 0; pointer-events: none; display: flex; align-items: center; } .popover__content * { min-width: 100%; } .popover__content--open { opacity: 1; transform: translateY(0); pointer-events: auto; animation: var(--popover-animation); } .footer { border-top-left-radius: var(--footer-border-radius); border-top-right-radius: var(--footer-border-radius); background-color: var(--footer-background-color); color: var(--footer-text-color); padding: var(--footer-padding-vertical) 0; margin-top: auto; } .footer--gray { background-color: var(--footer-gray-background-color); } .footer--floating { --margin: var(--footer-floating-margin); margin: var(--margin); border-radius: var(--footer-border-radius); } .footer .container { display: flex; align-items: center; } .header { position: sticky; top: 0; border-bottom-left-radius: var(--header-border-radius); border-bottom-right-radius: var(--header-border-radius); background-color: var(--header-background-color); color: var(--header-text-color); padding: var(--header-padding-vertical) 0; display: flex; align-items: center; gap: 1em; z-index: 1; } .header--gray { background-color: var(--header-gray-background-color); } .header--floating { --margin: var(--header-floating-margin); margin: var(--margin); top: var(--margin); border-radius: var(--header-border-radius); } .header .container { display: flex; gap: 1em; align-items: center; } .header__content { width: 100%; display: flex; align-items: center; } .header svg.icon.header__logo { --height: 2em; --width: 8.375em; height: var(--height); min-width: var(--height); display: inline-block; color: var(--white-color); } .header svg.icon.header__logo--bast { min-width: var(--width); width: var(--width); } .header svg.icon.header__logo--skat { --width: 4.68em; min-width: var(--width); width: var(--width); } .icon { min-width: var(--icon-size); width: var(--icon-size); height: var(--icon-size); color: var(--text-color); } html, body, div[id=root] { height: 100%; font-family: "Roboto", sans-serif; font-weight: 500; background-color: var(--background-color); } html, body { overflow: hidden; } div[id=root] { overflow: auto; position: absolute; top: 0; left: 0; width: 100%; } * { padding: 0; margin: 0; box-sizing: border-box; }