/* Auto-generated, DO NOT EDIT */

/* fill */
.fill-main { fill: $main }
.fill-gray-light-shade { fill: $gray-light-shade }
.fill-gray-lightest { fill: $gray-lightest }
.fill-gray-light { fill: $gray-light }
.fill-gray-bg { fill: $gray-bg }
.fill-gray-medium { fill: $gray-medium }
.fill-gray-dark { fill: $gray-dark }
.fill-gray-darkest { fill: $gray-darkest }
.fill-teal { fill: $teal }
.fill-teal-dark { fill: $teal-dark }
.fill-teal-light { fill: $teal-light }
.fill-tealx { fill: $tealx }
.fill-tealx-light { fill: $tealx-light }
.fill-tealx-light-border { fill: $tealx-light-border }
.fill-tealx-lightest { fill: $tealx-lightest }
.fill-orange { fill: $orange }
.fill-yellow { fill: $yellow }
.fill-yellow2 { fill: $yellow2 }
.fill-orange-dark { fill: $orange-dark }
.fill-green { fill: $green }
.fill-green2 { fill: $green2 }
.fill-green-dark { fill: $green-dark }
.fill-red { fill: $red }
.fill-red2 { fill: $red2 }
.fill-red-lightest { fill: $red-lightest }
.fill-blue { fill: $blue }
.fill-blue2 { fill: $blue2 }
.fill-active-blue { fill: $active-blue }
.fill-bg-blue { fill: $bg-blue }
.fill-active-blue-border { fill: $active-blue-border }
.fill-pink { fill: $pink }
.fill-light-blue-bg { fill: $light-blue-bg }
.fill-white { fill: $white }
.fill-borderColor { fill: $borderColor }
.fill-transparent { fill: $transparent }
.fill-figmaColors { fill: $figmaColors }
.hover-fill-main:hover svg { fill: $main }
.hover-fill-gray-light-shade:hover svg { fill: $gray-light-shade }
.hover-fill-gray-lightest:hover svg { fill: $gray-lightest }
.hover-fill-gray-light:hover svg { fill: $gray-light }
.hover-fill-gray-bg:hover svg { fill: $gray-bg }
.hover-fill-gray-medium:hover svg { fill: $gray-medium }
.hover-fill-gray-dark:hover svg { fill: $gray-dark }
.hover-fill-gray-darkest:hover svg { fill: $gray-darkest }
.hover-fill-teal:hover svg { fill: $teal }
.hover-fill-teal-dark:hover svg { fill: $teal-dark }
.hover-fill-teal-light:hover svg { fill: $teal-light }
.hover-fill-tealx:hover svg { fill: $tealx }
.hover-fill-tealx-light:hover svg { fill: $tealx-light }
.hover-fill-tealx-light-border:hover svg { fill: $tealx-light-border }
.hover-fill-tealx-lightest:hover svg { fill: $tealx-lightest }
.hover-fill-orange:hover svg { fill: $orange }
.hover-fill-yellow:hover svg { fill: $yellow }
.hover-fill-yellow2:hover svg { fill: $yellow2 }
.hover-fill-orange-dark:hover svg { fill: $orange-dark }
.hover-fill-green:hover svg { fill: $green }
.hover-fill-green2:hover svg { fill: $green2 }
.hover-fill-green-dark:hover svg { fill: $green-dark }
.hover-fill-red:hover svg { fill: $red }
.hover-fill-red2:hover svg { fill: $red2 }
.hover-fill-red-lightest:hover svg { fill: $red-lightest }
.hover-fill-blue:hover svg { fill: $blue }
.hover-fill-blue2:hover svg { fill: $blue2 }
.hover-fill-active-blue:hover svg { fill: $active-blue }
.hover-fill-bg-blue:hover svg { fill: $bg-blue }
.hover-fill-active-blue-border:hover svg { fill: $active-blue-border }
.hover-fill-pink:hover svg { fill: $pink }
.hover-fill-light-blue-bg:hover svg { fill: $light-blue-bg }
.hover-fill-white:hover svg { fill: $white }
.hover-fill-borderColor:hover svg { fill: $borderColor }
.hover-fill-transparent:hover svg { fill: $transparent }
.hover-fill-figmaColors:hover svg { fill: $figmaColors }

/* color */
.color-main { color: $main }
.color-gray-light-shade { color: $gray-light-shade }
.color-gray-lightest { color: $gray-lightest }
.color-gray-light { color: $gray-light }
.color-gray-bg { color: $gray-bg }
.color-gray-medium { color: $gray-medium }
.color-gray-dark { color: $gray-dark }
.color-gray-darkest { color: $gray-darkest }
.color-teal { color: $teal }
.color-teal-dark { color: $teal-dark }
.color-teal-light { color: $teal-light }
.color-tealx { color: $tealx }
.color-tealx-light { color: $tealx-light }
.color-tealx-light-border { color: $tealx-light-border }
.color-tealx-lightest { color: $tealx-lightest }
.color-orange { color: $orange }
.color-yellow { color: $yellow }
.color-yellow2 { color: $yellow2 }
.color-orange-dark { color: $orange-dark }
.color-green { color: $green }
.color-green2 { color: $green2 }
.color-green-dark { color: $green-dark }
.color-red { color: $red }
.color-red2 { color: $red2 }
.color-red-lightest { color: $red-lightest }
.color-blue { color: $blue }
.color-blue2 { color: $blue2 }
.color-active-blue { color: $active-blue }
.color-bg-blue { color: $bg-blue }
.color-active-blue-border { color: $active-blue-border }
.color-pink { color: $pink }
.color-light-blue-bg { color: $light-blue-bg }
.color-white { color: $white }
.color-borderColor { color: $borderColor }
.color-transparent { color: $transparent }
.color-figmaColors { color: $figmaColors }

/* hover color */
.hover-main:hover { color: $main }
.hover-gray-light-shade:hover { color: $gray-light-shade }
.hover-gray-lightest:hover { color: $gray-lightest }
.hover-gray-light:hover { color: $gray-light }
.hover-gray-bg:hover { color: $gray-bg }
.hover-gray-medium:hover { color: $gray-medium }
.hover-gray-dark:hover { color: $gray-dark }
.hover-gray-darkest:hover { color: $gray-darkest }
.hover-teal:hover { color: $teal }
.hover-teal-dark:hover { color: $teal-dark }
.hover-teal-light:hover { color: $teal-light }
.hover-tealx:hover { color: $tealx }
.hover-tealx-light:hover { color: $tealx-light }
.hover-tealx-light-border:hover { color: $tealx-light-border }
.hover-tealx-lightest:hover { color: $tealx-lightest }
.hover-orange:hover { color: $orange }
.hover-yellow:hover { color: $yellow }
.hover-yellow2:hover { color: $yellow2 }
.hover-orange-dark:hover { color: $orange-dark }
.hover-green:hover { color: $green }
.hover-green2:hover { color: $green2 }
.hover-green-dark:hover { color: $green-dark }
.hover-red:hover { color: $red }
.hover-red2:hover { color: $red2 }
.hover-red-lightest:hover { color: $red-lightest }
.hover-blue:hover { color: $blue }
.hover-blue2:hover { color: $blue2 }
.hover-active-blue:hover { color: $active-blue }
.hover-bg-blue:hover { color: $bg-blue }
.hover-active-blue-border:hover { color: $active-blue-border }
.hover-pink:hover { color: $pink }
.hover-light-blue-bg:hover { color: $light-blue-bg }
.hover-white:hover { color: $white }
.hover-borderColor:hover { color: $borderColor }
.hover-transparent:hover { color: $transparent }
.hover-figmaColors:hover { color: $figmaColors }

.border-main { border-color: $main }
.border-gray-light-shade { border-color: $gray-light-shade }
.border-gray-lightest { border-color: $gray-lightest }
.border-gray-light { border-color: $gray-light }
.border-gray-bg { border-color: $gray-bg }
.border-gray-medium { border-color: $gray-medium }
.border-gray-dark { border-color: $gray-dark }
.border-gray-darkest { border-color: $gray-darkest }
.border-teal { border-color: $teal }
.border-teal-dark { border-color: $teal-dark }
.border-teal-light { border-color: $teal-light }
.border-tealx { border-color: $tealx }
.border-tealx-light { border-color: $tealx-light }
.border-tealx-light-border { border-color: $tealx-light-border }
.border-tealx-lightest { border-color: $tealx-lightest }
.border-orange { border-color: $orange }
.border-yellow { border-color: $yellow }
.border-yellow2 { border-color: $yellow2 }
.border-orange-dark { border-color: $orange-dark }
.border-green { border-color: $green }
.border-green2 { border-color: $green2 }
.border-green-dark { border-color: $green-dark }
.border-red { border-color: $red }
.border-red2 { border-color: $red2 }
.border-red-lightest { border-color: $red-lightest }
.border-blue { border-color: $blue }
.border-blue2 { border-color: $blue2 }
.border-active-blue { border-color: $active-blue }
.border-bg-blue { border-color: $bg-blue }
.border-active-blue-border { border-color: $active-blue-border }
.border-pink { border-color: $pink }
.border-light-blue-bg { border-color: $light-blue-bg }
.border-white { border-color: $white }
.border-borderColor { border-color: $borderColor }
.border-transparent { border-color: $transparent }
.border-figmaColors { border-color: $figmaColors }