@heycar-uikit/core
Version:
The React UI library from HeyCar
1 lines • 26.8 kB
Source Map (JSON)
{"version":3,"sources":["ButtonIcon.module.css","ButtonLoader.module.css","default.module.css","size.module.css","../../../vars/src/typography.css","../../../vars/src/colors.css","../../../vars/src/gaps.css","../../../vars/src/spacing.css","../../../vars/src/shadows.css","../../../themes/src/default.css","variant.module.css"],"names":[],"mappings":"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","file":"Button.css","sourcesContent":["@import '../../../themes/src/default.css';\n\n/* Icon */\n.icon {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n margin: 0;\n\n &:only-child {\n margin: 0;\n }\n}\n",".loader {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & div {\n height: 4px;\n width: 4px;\n margin-right: 4px;\n border-radius: 100%;\n background-color: currentColor;\n animation-name: blink;\n animation-duration: 950ms;\n animation-iteration-count: infinite;\n animation-timing-function: ease-in-out;\n transform: scale(0);\n }\n\n & div:nth-child(1) {\n animation-delay: 0ms;\n transform-origin: 15% 50%;\n }\n\n & div:nth-child(2) {\n animation-delay: 150ms;\n transform-origin: 50% 50%;\n }\n\n & div:nth-child(3) {\n animation-delay: 300ms;\n transform-origin: 85% 50%;\n }\n}\n\n@keyframes blink {\n 21% {\n transform: scale(1);\n }\n\n 47% {\n transform: scale(1);\n }\n\n 68% {\n transform: scale(0);\n }\n}\n","@import '../../../themes/src/default.css';\n\n/*\n* Base\n*/\n.button {\n font-family: var(--font-family-system);\n padding: var(--gap-2xs) var(--gap-xl);\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-content: center;\n align-items: center;\n margin: 0;\n border: 0;\n outline: none;\n box-shadow: none;\n user-select: none;\n cursor: pointer;\n box-sizing: border-box;\n text-decoration: none;\n line-height: 1.2;\n border-style: solid;\n white-space: nowrap;\n gap: var(--spacing-2);\n\n &:disabled,\n &[disabled] {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.iconLeft {\n margin-left: -4px;\n}\n\n.iconRight {\n margin-right: -4px;\n}\n\n/* Full width */\n.fullWidth {\n display: flex;\n width: 100%;\n}\n\n/* Loading */\n.loading .text,\n.loading .icon {\n opacity: 0;\n}\n\n.loading {\n pointer-events: none;\n\n &:hover {\n background: currentColor;\n }\n}\n\n.loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n","@import '../../../themes/src/default.css';\n\n/*\n* Vars\n*/\n:root {\n /* Sizes */\n --button-small-height: var(--size-small-height);\n --button-large-height: var(--size-large-height);\n}\n\n/*\n* Sizes\n*/\n.small {\n min-height: var(--button-small-height);\n padding: var(--gap-2xs) var(--gap-s);\n @mixin button_small__medium;\n}\n\n.large {\n min-height: var(--button-large-height);\n @mixin button_large__bold;\n}\n",":root {\n /* Font families */\n --font-family-system: Objektiv, sans-serif, 'Helvetica Neue', Helvetica, Arial;\n\n /* Font weights */\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-bold: 600;\n --font-weight-xbold: 800;\n}\n\n/*\n Heading\n*/\n@define-mixin typography-display {\n font-size: 48px;\n line-height: 56px;\n letter-spacing: -2px;\n font-family: var(--font-family-system);\n font-weight: var(--font-weight-xbold);\n\n @media (--tablet) {\n font-size: 60px;\n line-height: 68px;\n letter-spacing: -2.5px;\n }\n}\n\n@define-mixin typography-display-2 {\n font-size: 48px;\n line-height: 56px;\n letter-spacing: -2px;\n font-family: var(--font-family-system);\n font-weight: var(--font-weight-bold);\n\n @media (--tablet) {\n font-size: 60px;\n line-height: 68px;\n letter-spacing: -2.5px;\n }\n}\n\n@define-mixin typography-heading-1 {\n font-size: 48px;\n line-height: 56px;\n letter-spacing: -2px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-1_mobile {\n @mixin typography-heading-1;\n letter-spacing: -0.5px;\n font-size: 32px;\n line-height: 40px;\n}\n\n@define-mixin typography-heading-2 {\n font-size: 32px;\n letter-spacing: -0.5px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-2_mobile {\n @mixin typography-heading-2;\n font-size: 24px;\n}\n\n@define-mixin typography-heading-3 {\n font-size: 28px;\n letter-spacing: -0.5px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-3_mobile {\n @mixin typography-heading-3;\n font-size: 24px;\n}\n\n@define-mixin typography-heading-4 {\n font-size: 24px;\n letter-spacing: -0.5px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-4_mobile {\n @mixin typography-heading-4;\n letter-spacing: 0;\n font-size: 20px;\n}\n\n@define-mixin typography-heading-5 {\n font-size: 20px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-5_mobile {\n @mixin typography-heading-5;\n font-size: 16px;\n}\n@define-mixin typography-heading-6 {\n font-size: 16px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n/*\n Sub-Heading\n*/\n@define-mixin typography-subheading-1 {\n font-size: 14px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-subheading-2 {\n font-size: 16px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-subheading-3 {\n font-size: 14px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-subheading-4 {\n font-size: 16px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n/*\n Body\n*/\n@define-mixin typography-body-1 {\n font-size: 16px;\n line-height: 26px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-body-2 {\n font-size: 14px;\n line-height: 22px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-body-3 {\n font-size: 16px;\n line-height: 26px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-body-4 {\n font-size: 14px;\n line-height: 22px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n/*\n Caption\n*/\n@define-mixin typography-caption-1 {\n font-size: 12px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-2 {\n font-size: 12px;\n line-height: 18px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-3 {\n font-size: 10px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-4 {\n font-size: 10px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-5 {\n font-size: 10px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n/*\n Overline\n*/\n@define-mixin typography-overline-1 {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-overline-2 {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n/*\n Button\n*/\n@define-mixin typography-button-1 {\n font-size: 16px;\n font-weight: var(--font-weight-bold);\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-button-2 {\n font-size: 14px;\n font-weight: var(--font-weight-bold);\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-button-3 {\n font-size: 12px;\n font-weight: var(--font-weight-bold);\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n/*\n Button Old - DO NOT USE\n*/\n@define-mixin button_large__bold {\n font-size: 16px;\n font-weight: 700;\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin button_medium__bold {\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin button_small__medium {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n",":root {\n /* heycar mint color */\n --color-heycar-mint-50: #e6faf6;\n --color-heycar-mint-100: #ccf5ed;\n --color-heycar-mint-200: #99ebdb;\n --color-heycar-mint-300: #66e2c9;\n --color-heycar-mint-400: #33d8b7;\n --color-heycar-mint-500: #00cea5;\n --color-heycar-mint-600: #00a584;\n --color-heycar-mint-700: #007c63;\n --color-heycar-mint-800: #005242;\n --color-heycar-mint-900: #002921;\n\n /* mica blue color */\n --color-mica-blue-50: #f1f4fa;\n --color-mica-blue-100: #dee6f2;\n --color-mica-blue-200: #a2b7da;\n --color-mica-blue-300: #7394c8;\n --color-mica-blue-400: #4570b5;\n --color-mica-blue-500: #164ca3;\n --color-mica-blue-600: #123d82;\n --color-mica-blue-700: #052962;\n --color-mica-blue-800: #091e41;\n --color-mica-blue-900: #040f21;\n\n /* sunbeam blue color */\n --color-sunbeam-blue-50: #f0f9ff;\n --color-sunbeam-blue-100: #e8f6ff;\n --color-sunbeam-blue-200: #e1f3ff;\n --color-sunbeam-blue-300: #d9f0ff;\n --color-sunbeam-blue-400: #cdebff;\n --color-sunbeam-blue-500: #c0e6ff;\n --color-sunbeam-blue-600: #9bd1f4;\n --color-sunbeam-blue-700: #73b6e1;\n --color-sunbeam-blue-800: #4499cf;\n --color-sunbeam-blue-900: #2b6f99;\n\n /* mustang yellow color */\n --color-mustang-yellow-50: #fef8eb;\n --color-mustang-yellow-100: #fef0d8;\n --color-mustang-yellow-200: #fde1b0;\n --color-mustang-yellow-300: #fbd289;\n --color-mustang-yellow-400: #fac361;\n --color-mustang-yellow-500: #f9b43a;\n --color-mustang-yellow-600: #e29a1a;\n --color-mustang-yellow-700: #c9850c;\n --color-mustang-yellow-800: #ae7000;\n --color-mustang-yellow-900: #895800;\n\n /* old ferrari red color */\n --color-old-ferrari-red-50: #fff1ef;\n --color-old-ferrari-red-100: #ffe3df;\n --color-old-ferrari-red-200: #ffc8be;\n --color-old-ferrari-red-300: #ffac9e;\n --color-old-ferrari-red-400: #ff917d;\n --color-old-ferrari-red-500: #ff755d;\n --color-old-ferrari-red-600: #f46147;\n --color-old-ferrari-red-700: #e24529;\n --color-old-ferrari-red-800: #d73013;\n --color-old-ferrari-red-900: #c7270a;\n\n /* -- fantasy name of \"green\" color to be defined -- */\n --color-green-50: #e9f3ed;\n --color-green-100: #d2e8db;\n --color-green-200: #a5d1b8;\n --color-green-300: #79b994;\n --color-green-400: #4ca271;\n --color-green-500: #1f8b4d;\n --color-green-600: #196f3e;\n --color-green-700: #13532e;\n --color-green-800: #0c381f;\n --color-green-900: #061c0f;\n\n /* -- fantasy name of \"whatsapp\" color to be defined -- */\n --color-whatsapp-500: #59ce72;\n --color-whatsapp-600: #33a84c;\n --color-whatsapp-700: #148a2d;\n\n /* -- fantasy name of \"red\" color to be defined -- */\n --color-red-50: #fdeeee;\n --color-red-100: #fbdddd;\n --color-red-200: #f7bcbc;\n --color-red-300: #f39a9a;\n --color-red-400: #ef7979;\n --color-red-500: #eb5757;\n --color-red-600: #d73535;\n --color-red-700: #c61a1a;\n --color-red-800: #b90606;\n --color-red-900: #a00;\n\n /* tarmac grey color */\n --color-tarmac-grey-50: #f3f3f3;\n --color-tarmac-grey-100: #e6e6e6;\n --color-tarmac-grey-200: #cdcdcd;\n --color-tarmac-grey-300: #b5b5b5;\n --color-tarmac-grey-400: #9c9c9c;\n --color-tarmac-grey-500: #838383;\n --color-tarmac-grey-600: #595959;\n --color-tarmac-grey-700: #303030;\n --color-tarmac-grey-800: #262626;\n --color-tarmac-grey-900: #1d1d1d;\n\n /* brand colors */\n --color-heycar-mint: var(--color-heycar-mint-500);\n --color-mica-blue: var(--color-mica-blue-700);\n --color-sunbeam-blue: var(--color-sunbeam-blue-500);\n --color-championship-white: #fff;\n}\n","/* Depricated. Do Not Use */\n\n:root {\n --gap-3xs: 2px;\n --gap-2xs: 4px;\n --gap-1xs: 6px;\n --gap-xs: 8px;\n --gap-s: 12px;\n --gap-2s: 14px;\n --gap-m: 16px;\n --gap-l: 20px;\n --gap-xl: 24px;\n --gap-2xl: 28px;\n --gap-3xl: 32px;\n --gap-4xl: 36px;\n --gap-5xl: 40px;\n --gap-6xl: 44px;\n --gap-7xl: 48px;\n --gap-8xl: 56px;\n --gap-9xl: 64px;\n --gap-10xl: 72px;\n}\n",":root {\n --spacing-1: 4px;\n --spacing-2: 8px;\n --spacing-3: 12px;\n --spacing-4: 16px;\n --spacing-5: 20px;\n --spacing-6: 24px;\n --spacing-7: 28px;\n --spacing-8: 32px;\n --spacing-9: 36px;\n --spacing-10: 40px;\n --spacing-11: 44px;\n --spacing-12: 48px;\n --spacing-14: 56px;\n --spacing-16: 64px;\n --spacing-18: 72px;\n}\n",":root {\n --shadow-none: 'none';\n --shadow-xs: 0 2px 4px rgba(38, 38, 38, 0.06);\n --shadow-s: 0 2px 8px rgba(38, 38, 38, 0.08);\n --shadow-m: 0 4px 12px rgba(38, 38, 38, 0.08);\n --shadow-xl: 0 6px 24px rgba(38, 38, 38, 0.1);\n --shadow-xxl: 2px 8px 48px rgba(38, 38, 38, 0.2);\n}\n","@import '../../vars/src/index.css';\n\n/* Default theme (light) */\n\n:root {\n /*\n Colors\n */\n --color-primary-50: var(--color-mica-blue-50);\n --color-primary-100: var(--color-mica-blue-100);\n --color-primary-200: var(--color-mica-blue-200);\n --color-primary-300: var(--color-mica-blue-300);\n --color-primary-400: var(--color-mica-blue-400);\n --color-primary-500: var(--color-mica-blue-500);\n --color-primary-600: var(--color-mica-blue-600);\n --color-primary-700: var(--color-mica-blue-700);\n --color-primary-800: var(--color-mica-blue-800);\n --color-primary-900: var(--color-mica-blue-900);\n --color-secondary-50: var(--color-heycar-mint-50);\n --color-secondary-100: var(--color-heycar-mint-100);\n --color-secondary-200: var(--color-heycar-mint-200);\n --color-secondary-300: var(--color-heycar-mint-300);\n --color-secondary-400: var(--color-heycar-mint-400);\n --color-secondary-500: var(--color-heycar-mint-500);\n --color-secondary-600: var(--color-heycar-mint-600);\n --color-secondary-700: var(--color-heycar-mint-700);\n --color-secondary-800: var(--color-heycar-mint-800);\n --color-secondary-900: var(--color-heycar-mint-900);\n --color-tertiary-50: var(--color-sunbeam-blue-50);\n --color-tertiary-100: var(--color-sunbeam-blue-100);\n --color-tertiary-200: var(--color-sunbeam-blue-200);\n --color-tertiary-300: var(--color-sunbeam-blue-300);\n --color-tertiary-400: var(--color-sunbeam-blue-400);\n --color-tertiary-500: var(--color-sunbeam-blue-500);\n --color-tertiary-600: var(--color-sunbeam-blue-600);\n --color-tertiary-700: var(--color-sunbeam-blue-700);\n --color-tertiary-800: var(--color-sunbeam-blue-800);\n --color-tertiary-900: var(--color-sunbeam-blue-900);\n --color-warning-50: var(--color-mustang-yellow-50);\n --color-warning-100: var(--color-mustang-yellow-100);\n --color-warning-200: var(--color-mustang-yellow-200);\n --color-warning-300: var(--color-mustang-yellow-300);\n --color-warning-400: var(--color-mustang-yellow-400);\n --color-warning-500: var(--color-mustang-yellow-500);\n --color-warning-600: var(--color-mustang-yellow-600);\n --color-warning-700: var(--color-mustang-yellow-700);\n --color-warning-800: var(--color-mustang-yellow-800);\n --color-warning-900: var(--color-mustang-yellow-900);\n --color-highlight-50: var(--color-old-ferrari-red-50);\n --color-highlight-100: var(--color-old-ferrari-red-100);\n --color-highlight-200: var(--color-old-ferrari-red-200);\n --color-highlight-300: var(--color-old-ferrari-red-300);\n --color-highlight-400: var(--color-old-ferrari-red-400);\n --color-highlight-500: var(--color-old-ferrari-red-500);\n --color-highlight-600: var(--color-old-ferrari-red-600);\n --color-highlight-700: var(--color-old-ferrari-red-700);\n --color-highlight-800: var(--color-old-ferrari-red-800);\n --color-highlight-900: var(--color-old-ferrari-red-900);\n --color-success-50: var(--color-green-50);\n --color-success-100: var(--color-green-100);\n --color-success-200: var(--color-green-200);\n --color-success-300: var(--color-green-300);\n --color-success-400: var(--color-green-400);\n --color-success-500: var(--color-green-500);\n --color-success-600: var(--color-green-600);\n --color-success-700: var(--color-green-700);\n --color-success-800: var(--color-green-800);\n --color-success-900: var(--color-green-900);\n --color-error-50: var(--color-red-50);\n --color-error-100: var(--color-red-100);\n --color-error-200: var(--color-red-200);\n --color-error-300: var(--color-red-300);\n --color-error-400: var(--color-red-400);\n --color-error-500: var(--color-red-500);\n --color-error-600: var(--color-red-600);\n --color-error-700: var(--color-red-700);\n --color-error-800: var(--color-red-800);\n --color-error-900: var(--color-red-900);\n --color-neutral-50: var(--color-tarmac-grey-50);\n --color-neutral-100: var(--color-tarmac-grey-100);\n --color-neutral-200: var(--color-tarmac-grey-200);\n --color-neutral-300: var(--color-tarmac-grey-300);\n --color-neutral-400: var(--color-tarmac-grey-400);\n --color-neutral-500: var(--color-tarmac-grey-500);\n --color-neutral-600: var(--color-tarmac-grey-600);\n --color-neutral-700: var(--color-tarmac-grey-700);\n --color-neutral-800: var(--color-tarmac-grey-800);\n --color-neutral-900: var(--color-tarmac-grey-900);\n\n /*\n Sizes\n */\n --size-small-height: var(--spacing-8);\n --size-middle-height: var(--spacing-10);\n --size-large-height: var(--spacing-12);\n}\n\nhtml {\n font-size: 16px;\n}\n\nbody {\n color: var(--color-neutral-700);\n}\n","@import '../../../themes/src/default.css';\n\n/*\n* Vars\n*/\n:root {\n /* disabled */\n --button-disabled-color: var(--color-neutral-300);\n --button-disabled-bg-color: var(--color-neutral-50);\n\n /* primary */\n --button-primary-color: #fff;\n --button-primary-base-bg-color: var(--color-primary-500);\n --button-primary-hover-bg-color: var(--color-primary-600);\n --button-primary-active-bg-color: var(--color-primary-700);\n\n /* tertiary */\n --button-tertiary-color: var(--color-neutral-700);\n --button-tertiary-base-bg-color: var(--color-tertiary-500);\n --button-tertiary-hover-bg-color: var(--color-tertiary-600);\n --button-tertiary-active-bg-color: var(--color-tertiary-700);\n\n /* whatsapp */\n --button-whatsapp-color: #fff;\n --button-whatsapp-base-bg-color: var(--color-whatsapp-500);\n --button-whatsapp-hover-bg-color: var(--color-whatsapp-600);\n --button-whatsapp-active-bg-color: var(--color-whatsapp-700);\n}\n\n/*\n* Mixins\n*/\n@define-mixin button_color $color {\n background: $color;\n border-color: $color;\n color: $color;\n\n &:after {\n border-color: $color;\n }\n}\n\n/*\n* Colors\n*/\n\n/* primary */\n.primary {\n @mixin button_color var(--button-primary-base-bg-color);\n\n &:hover {\n @mixin button_color var(--button-primary-hover-bg-color);\n }\n\n &:active,\n &:focus-visible {\n @mixin button_color var(--button-primary-active-bg-color);\n }\n}\n\n/* tertiary */\n.tertiary {\n @mixin button_color var(--button-tertiary-base-bg-color);\n\n &:hover {\n @mixin button_color var(--button-tertiary-hover-bg-color);\n }\n\n &:active,\n &:focus-visible {\n @mixin button_color var(--button-tertiary-active-bg-color);\n }\n}\n\n/* whatsapp */\n.whatsapp {\n @mixin button_color var(--button-whatsapp-base-bg-color);\n\n &:hover {\n @mixin button_color var(--button-whatsapp-hover-bg-color);\n }\n\n &:active,\n &:focus-visible {\n @mixin button_color var(--button-whatsapp-active-bg-color);\n }\n}\n\n/*\n* Variants\n*/\n\n/* contained */\n.contained {\n &.primary {\n color: var(--button-primary-color);\n }\n\n &.tertiary {\n color: var(--button-tertiary-color);\n }\n\n &.whatsapp {\n color: var(--button-primary-color);\n }\n\n &:disabled,\n &[disabled] {\n background: var(--button-disabled-bg-color);\n border-color: var(--button-disabled-bg-color);\n color: var(--button-disabled-color);\n }\n}\n\n/* outlined */\n.outlined {\n background: transparent;\n\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-style: solid;\n border-width: 1px;\n border-color: currentColor;\n box-sizing: border-box;\n z-index: 0;\n }\n\n &:hover {\n background: transparent;\n\n &:after {\n border-width: 2px;\n }\n }\n\n &:active,\n &:focus-visible {\n background: none;\n &:after {\n border-width: 2px;\n }\n }\n\n &.tertiary {\n color: var(--button-tertiary-color);\n }\n\n &:disabled,\n &[disabled] {\n color: var(--button-disabled-color);\n background: none;\n\n &:after {\n border-color: var(--button-disabled-bg-color);\n }\n }\n}\n\n.link {\n min-height: auto;\n padding: 0;\n background: transparent;\n text-decoration: underline;\n text-underline-offset: 1px;\n\n &:hover {\n background: transparent;\n text-decoration-thickness: 2px;\n }\n\n &:active,\n &:focus-visible {\n background: transparent;\n }\n\n &:disabled,\n &[disabled] {\n border-color: var(--button-disabled-color);\n color: var(--button-disabled-color);\n }\n}\n"]}