@import '~@studip-ui/styles/tokens/colors'; // color scss vars

@import '~@studip-ui/styles/tokens/index'; // custom props from ui-kit

:root {
    --text-color: #{$color--font-primary};
    --active-color: #{$active-color};
    --activity-color: #{$activity-color};
    --activity-color-20: #{$activity-color-20};
    --activity-color-40: #{$activity-color-40};
    --activity-color-60: #{$activity-color-60};
    --activity-color-80: #{$activity-color-80};
    --base-color: #{$base-color};
    --base-color-20: #{$base-color-20};
    --base-color-40: #{$base-color-40};
    --base-color-60: #{$base-color-60};
    --base-color-80: #{$base-color-80};
    --base-gray: #{$base-gray};
    --black: #{$black};
    --brand-color-dark: #{$brand-color-dark};
    --brand-color-darker: #{$brand-color-darker};
    --brand-color-light: #{$brand-color-light};
    --brand-color-lighter: #{$brand-color-lighter};
    --brown: #{$brown};
    --brown-20: #{$brown-20};
    --brown-40: #{$brown-40};
    --brown-60: #{$brown-60};
    --brown-80: #{$brown-80};
    --content-color: #{$content-color};
    --content-color-10: #{$content-color-10};
    --content-color-20: #{$content-color-20};
    --content-color-40: #{$content-color-40};
    --content-color-60: #{$content-color-60};
    --content-color-80: #{$content-color-80};
    --contrast-content-gray: #{$contrast-content-gray};
    --contrast-content-hovergray: #{$contrast-content-hovergray};
    --contrast-content-white: #{$contrast-content-white};
    --dark-gray-color: #{$dark-gray-color};
    --dark-gray-color-10: #{$dark-gray-color-10};
    --dark-gray-color-15: #{$dark-gray-color-15};
    --dark-gray-color-20: #{$dark-gray-color-20};
    --dark-gray-color-30: #{$dark-gray-color-30};
    --dark-gray-color-40: #{$dark-gray-color-40};
    --dark-gray-color-45: #{$dark-gray-color-45};
    --dark-gray-color-5: #{$dark-gray-color-5};
    --dark-gray-color-60: #{$dark-gray-color-60};
    --dark-gray-color-75: #{$dark-gray-color-75};
    --dark-gray-color-80: #{$dark-gray-color-80};
    --dark-green: #{$dark-green};
    --dark-green-20: #{$dark-green-20};
    --dark-green-40: #{$dark-green-40};
    --dark-green-60: #{$dark-green-60};
    --dark-green-80: #{$dark-green-80};
    --dark-violet: #{$dark-violet};
    --dark-violet-20: #{$dark-violet-20};
    --dark-violet-40: #{$dark-violet-40};
    --dark-violet-60: #{$dark-violet-60};
    --dark-violet-80: #{$dark-violet-80};
    --green: #{$green};
    --green-20: #{$green-20};
    --green-40: #{$green-40};
    --green-60: #{$green-60};
    --green-80: #{$green-80};
    --light-gray-color: #{$light-gray-color};
    --light-gray-color-20: #{$light-gray-color-20};
    --light-gray-color-40: #{$light-gray-color-40};
    --light-gray-color-60: #{$light-gray-color-60};
    --light-gray-color-80: #{$light-gray-color-80};
    --orange: #{$orange};
    --orange-20: #{$orange-20};
    --orange-40: #{$orange-40};
    --orange-60: #{$orange-60};
    --orange-80: #{$orange-80};
    --origin-base-color: #{$origin-base-color};
    --petrol: #{$petrol};
    --petrol-20: #{$petrol-20};
    --petrol-40: #{$petrol-40};
    --petrol-60: #{$petrol-60};
    --petrol-80: #{$petrol-80};
    --public-course-bgcolor: #{$public-course-bgcolor};
    --red: #{$red};
    --red-20: #{$red-20};
    --red-40: #{$red-40};
    --red-60: #{$red-60};
    --red-80: #{$red-80};
    --table-footer-color: #{$color--table-header};
    --table-header-color: #{$color--table-header};
    --violet: #{$violet};
    --violet-20: #{$violet-20};
    --violet-40: #{$violet-40};
    --violet-60: #{$violet-60};
    --violet-80: #{$violet-80};
    --white: #{$white};
    --yellow: #{$yellow};
    --yellow-20: #{$yellow-20};
    --yellow-40: #{$yellow-40};
    --yellow-60: #{$yellow-60};
    --yellow-80: #{$yellow-80};

    --group-color-0: #{$dark-violet};
    --group-color-1: #{$violet};
    --group-color-2: #{$red};
    --group-color-3: #{$orange};
    --group-color-4: #{$yellow};
    --group-color-5: #{$green};
    --group-color-6: #{$dark-green};
    --group-color-7: #{$petrol};
    --group-color-8: #{$brown};

    --avatar-small: #{$avatar-small};
    --avatar-medium: #{$avatar-medium};
    --avatar-normal: #{$avatar-normal};

    --icon-size-default: #{$icon-size-default};
    --icon-size-button: #{$icon-size-button};
    --icon-size-inline: #{$icon-size-inline};
    #{"--"}icon-size-action-menu: var(--icon-size-default);

    --transition-duration: #{$transition-duration};
    --transition-duration-slow: #{$transition-duration-slow};
    --transition-duration-superslow: #{$transition-duration-superslow};

    --color--calendar-today: #{$color--calendar-today};

    --border-radius-default: #{$border-radius};
    --border-radius-avatar-menu: #{$border-radius-avatar-menu};
    --border-radius-search: #{$border-radius-search};

    @media (prefers-reduced-motion) {
        --transition-duration: 0s;
        --transition-duration-slow: 0s;
    }
}