/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *    https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

$blue: var(--blue);
$purple: var(--purple);
$cyan: var(--cyan);
$green: var(--green);
$magenta: var(--magenta);
$pink: var(--pink);
$red: var(--red);
$orange: var(--orange);
$yellow: var(--yellow);
$volcano: var(--volcano);
$geekblue: var(--geekblue);
$gold: var(--gold);
$lime: var(--lime);
$color-primary: var(--color-primary);
$color-success: var(--color-success);
$color-warning: var(--color-warning);
$color-error: var(--color-error);
$color-info: var(--color-info);
$color-text-base: var(--color-text-base);
$color-bg-base: var(--color-bg-base);
$font-family: var(--font-family);
$font-size: var(--font-size);
$line-width: var(--line-width);
$line-type: var(--line-type);
$motion-unit: var(--motion-unit);
$motion-base: var(--motion-base);
$motion-ease-out-circ: var(--motion-ease-out-circ);
$motion-ease-in-out-circ: var(--motion-ease-in-out-circ);
$motion-ease-out: var(--motion-ease-out);
$motion-ease-in-out: var(--motion-ease-in-out);
$motion-ease-out-back: var(--motion-ease-out-back);
$motion-ease-in-back: var(--motion-ease-in-back);
$motion-ease-in-quint: var(--motion-ease-in-quint);
$motion-ease-out-quint: var(--motion-ease-out-quint);
$border-radius: var(--border-radius);
$size-unit: var(--size-unit);
$size-step: var(--size-step);
$size-popup-arrow: var(--size-popup-arrow);
$control-height: var(--control-height);
$z-index-base: var(--z-index-base);
$z-index-popup-base: var(--z-index-popup-base);
$opacity-image: var(--opacity-image);
$wireframe: var(--wireframe);
$blue-1: var(--blue-1);
$blue-2: var(--blue-2);
$blue-3: var(--blue-3);
$blue-4: var(--blue-4);
$blue-5: var(--blue-5);
$blue-6: var(--blue-6);
$blue-7: var(--blue-7);
$blue-8: var(--blue-8);
$blue-9: var(--blue-9);
$blue-10: var(--blue-10);
$purple-1: var(--purple-1);
$purple-2: var(--purple-2);
$purple-3: var(--purple-3);
$purple-4: var(--purple-4);
$purple-5: var(--purple-5);
$purple-6: var(--purple-6);
$purple-7: var(--purple-7);
$purple-8: var(--purple-8);
$purple-9: var(--purple-9);
$purple-10: var(--purple-10);
$cyan-1: var(--cyan-1);
$cyan-2: var(--cyan-2);
$cyan-3: var(--cyan-3);
$cyan-4: var(--cyan-4);
$cyan-5: var(--cyan-5);
$cyan-6: var(--cyan-6);
$cyan-7: var(--cyan-7);
$cyan-8: var(--cyan-8);
$cyan-9: var(--cyan-9);
$cyan-10: var(--cyan-10);
$green-1: var(--green-1);
$green-2: var(--green-2);
$green-3: var(--green-3);
$green-4: var(--green-4);
$green-5: var(--green-5);
$green-6: var(--green-6);
$green-7: var(--green-7);
$green-8: var(--green-8);
$green-9: var(--green-9);
$green-10: var(--green-10);
$magenta-1: var(--magenta-1);
$magenta-2: var(--magenta-2);
$magenta-3: var(--magenta-3);
$magenta-4: var(--magenta-4);
$magenta-5: var(--magenta-5);
$magenta-6: var(--magenta-6);
$magenta-7: var(--magenta-7);
$magenta-8: var(--magenta-8);
$magenta-9: var(--magenta-9);
$magenta-10: var(--magenta-10);
$pink-1: var(--pink-1);
$pink-2: var(--pink-2);
$pink-3: var(--pink-3);
$pink-4: var(--pink-4);
$pink-5: var(--pink-5);
$pink-6: var(--pink-6);
$pink-7: var(--pink-7);
$pink-8: var(--pink-8);
$pink-9: var(--pink-9);
$pink-10: var(--pink-10);
$red-1: var(--red-1);
$red-2: var(--red-2);
$red-3: var(--red-3);
$red-4: var(--red-4);
$red-5: var(--red-5);
$red-6: var(--red-6);
$red-7: var(--red-7);
$red-8: var(--red-8);
$red-9: var(--red-9);
$red-10: var(--red-10);
$orange-1: var(--orange-1);
$orange-2: var(--orange-2);
$orange-3: var(--orange-3);
$orange-4: var(--orange-4);
$orange-5: var(--orange-5);
$orange-6: var(--orange-6);
$orange-7: var(--orange-7);
$orange-8: var(--orange-8);
$orange-9: var(--orange-9);
$orange-10: var(--orange-10);
$yellow-1: var(--yellow-1);
$yellow-2: var(--yellow-2);
$yellow-3: var(--yellow-3);
$yellow-4: var(--yellow-4);
$yellow-5: var(--yellow-5);
$yellow-6: var(--yellow-6);
$yellow-7: var(--yellow-7);
$yellow-8: var(--yellow-8);
$yellow-9: var(--yellow-9);
$yellow-10: var(--yellow-10);
$volcano-1: var(--volcano-1);
$volcano-2: var(--volcano-2);
$volcano-3: var(--volcano-3);
$volcano-4: var(--volcano-4);
$volcano-5: var(--volcano-5);
$volcano-6: var(--volcano-6);
$volcano-7: var(--volcano-7);
$volcano-8: var(--volcano-8);
$volcano-9: var(--volcano-9);
$volcano-10: var(--volcano-10);
$geekblue-1: var(--geekblue-1);
$geekblue-2: var(--geekblue-2);
$geekblue-3: var(--geekblue-3);
$geekblue-4: var(--geekblue-4);
$geekblue-5: var(--geekblue-5);
$geekblue-6: var(--geekblue-6);
$geekblue-7: var(--geekblue-7);
$geekblue-8: var(--geekblue-8);
$geekblue-9: var(--geekblue-9);
$geekblue-10: var(--geekblue-10);
$gold-1: var(--gold-1);
$gold-2: var(--gold-2);
$gold-3: var(--gold-3);
$gold-4: var(--gold-4);
$gold-5: var(--gold-5);
$gold-6: var(--gold-6);
$gold-7: var(--gold-7);
$gold-8: var(--gold-8);
$gold-9: var(--gold-9);
$gold-10: var(--gold-10);
$lime-1: var(--lime-1);
$lime-2: var(--lime-2);
$lime-3: var(--lime-3);
$lime-4: var(--lime-4);
$lime-5: var(--lime-5);
$lime-6: var(--lime-6);
$lime-7: var(--lime-7);
$lime-8: var(--lime-8);
$lime-9: var(--lime-9);
$lime-10: var(--lime-10);
$color-text: var(--color-text);
$color-text-secondary: var(--color-text-secondary);
$color-text-tertiary: var(--color-text-tertiary);
$color-text-quaternary: var(--color-text-quaternary);
$color-fill: var(--color-fill);
$color-fill-secondary: var(--color-fill-secondary);
$color-fill-tertiary: var(--color-fill-tertiary);
$color-fill-quaternary: var(--color-fill-quaternary);
$color-bg-layout: var(--color-bg-layout);
$color-bg-container: var(--color-bg-container);
$color-bg-elevated: var(--color-bg-elevated);
$color-bg-spotlight: var(--color-bg-spotlight);
$color-border: var(--color-border);
$color-border-secondary: var(--color-border-secondary);
$color-primary-bg: var(--color-primary-bg);
$color-primary-bg-hover: var(--color-primary-bg-hover);
$color-primary-border: var(--color-primary-border);
$color-primary-border-hover: var(--color-primary-border-hover);
$color-primary-hover: var(--color-primary-hover);
$color-primary-active: var(--color-primary-active);
$color-primary-text-hover: var(--color-primary-text-hover);
$color-primary-text: var(--color-primary-text);
$color-primary-text-active: var(--color-primary-text-active);
$color-success-bg: var(--color-success-bg);
$color-success-bg-hover: var(--color-success-bg-hover);
$color-success-border: var(--color-success-border);
$color-success-border-hover: var(--color-success-border-hover);
$color-success-hover: var(--color-success-hover);
$color-success-active: var(--color-success-active);
$color-success-text-hover: var(--color-success-text-hover);
$color-success-text: var(--color-success-text);
$color-success-text-active: var(--color-success-text-active);
$color-error-bg: var(--color-error-bg);
$color-error-bg-hover: var(--color-error-bg-hover);
$color-error-border: var(--color-error-border);
$color-error-border-hover: var(--color-error-border-hover);
$color-error-hover: var(--color-error-hover);
$color-error-active: var(--color-error-active);
$color-error-text-hover: var(--color-error-text-hover);
$color-error-text: var(--color-error-text);
$color-error-text-active: var(--color-error-text-active);
$color-warning-bg: var(--color-warning-bg);
$color-warning-bg-hover: var(--color-warning-bg-hover);
$color-warning-border: var(--color-warning-border);
$color-warning-border-hover: var(--color-warning-border-hover);
$color-warning-hover: var(--color-warning-hover);
$color-warning-active: var(--color-warning-active);
$color-warning-text-hover: var(--color-warning-text-hover);
$color-warning-text: var(--color-warning-text);
$color-warning-text-active: var(--color-warning-text-active);
$color-info-bg: var(--color-info-bg);
$color-info-bg-hover: var(--color-info-bg-hover);
$color-info-border: var(--color-info-border);
$color-info-border-hover: var(--color-info-border-hover);
$color-info-hover: var(--color-info-hover);
$color-info-active: var(--color-info-active);
$color-info-text-hover: var(--color-info-text-hover);
$color-info-text: var(--color-info-text);
$color-info-text-active: var(--color-info-text-active);
$color-bg-mask: var(--color-bg-mask);
$color-white: var(--color-white);
$font-size-s-m: var(--font-size-s-m);
$font-size-l-g: var(--font-size-l-g);
$font-size-x-l: var(--font-size-x-l);
$font-size-heading1: var(--font-size-heading1);
$font-size-heading2: var(--font-size-heading2);
$font-size-heading3: var(--font-size-heading3);
$font-size-heading4: var(--font-size-heading4);
$font-size-heading5: var(--font-size-heading5);
$line-height: var(--line-height);
$line-height-l-g: var(--line-height-l-g);
$line-height-s-m: var(--line-height-s-m);
$line-height-heading1: var(--line-height-heading1);
$line-height-heading2: var(--line-height-heading2);
$line-height-heading3: var(--line-height-heading3);
$line-height-heading4: var(--line-height-heading4);
$line-height-heading5: var(--line-height-heading5);
$size-x-x-l: var(--size-x-x-l);
$size-x-l: var(--size-x-l);
$size-l-g: var(--size-l-g);
$size-m-d: var(--size-m-d);
$size-m-s: var(--size-m-s);
$size: var(--size);
$size-s-m: var(--size-s-m);
$size-x-s: var(--size-x-s);
$size-x-x-s: var(--size-x-x-s);
$control-height-s-m: var(--control-height-s-m);
$control-height-x-s: var(--control-height-x-s);
$control-height-l-g: var(--control-height-l-g);
$motion-duration-fast: var(--motion-duration-fast);
$motion-duration-mid: var(--motion-duration-mid);
$motion-duration-slow: var(--motion-duration-slow);
$line-width-bold: var(--line-width-bold);
$border-radius-x-s: var(--border-radius-x-s);
$border-radius-s-m: var(--border-radius-s-m);
$border-radius-l-g: var(--border-radius-l-g);
$border-radius-outer: var(--border-radius-outer);
$color-link: var(--color-link);
$color-link-hover: var(--color-link-hover);
$color-link-active: var(--color-link-active);
$color-fill-content: var(--color-fill-content);
$color-fill-content-hover: var(--color-fill-content-hover);
$color-fill-alter: var(--color-fill-alter);
$color-bg-container-disabled: var(--color-bg-container-disabled);
$color-border-bg: var(--color-border-bg);
$color-split: var(--color-split);
$color-text-placeholder: var(--color-text-placeholder);
$color-text-disabled: var(--color-text-disabled);
$color-text-heading: var(--color-text-heading);
$color-text-label: var(--color-text-label);
$color-text-description: var(--color-text-description);
$color-text-light-solid: var(--color-text-light-solid);
$color-highlight: var(--color-highlight);
$color-bg-text-hover: var(--color-bg-text-hover);
$color-bg-text-active: var(--color-bg-text-active);
$color-icon: var(--color-icon);
$color-icon-hover: var(--color-icon-hover);
$color-error-outline: var(--color-error-outline);
$color-warning-outline: var(--color-warning-outline);
$font-size-icon: var(--font-size-icon);
$control-outline-width: var(--control-outline-width);
$control-interactive-size: var(--control-interactive-size);
$control-item-bg-hover: var(--control-item-bg-hover);
$control-item-bg-active: var(--control-item-bg-active);
$control-item-bg-active-hover: var(--control-item-bg-active-hover);
$control-item-bg-active-disabled: var(--control-item-bg-active-disabled);
$control-tmp-outline: var(--control-tmp-outline);
$control-outline: var(--control-outline);
$font-weight-strong: var(--font-weight-strong);
$opacity-loading: var(--opacity-loading);
$link-decoration: var(--link-decoration);
$link-hover-decoration: var(--link-hover-decoration);
$link-focus-decoration: var(--link-focus-decoration);
$control-padding-horizontal: var(--control-padding-horizontal);
$control-padding-horizontal-s-m: var(--control-padding-horizontal-s-m);
$padding-x-x-s: var(--padding-x-x-s);
$padding-x-s: var(--padding-x-s);
$padding-s-m: var(--padding-s-m);
$padding: var(--padding);
$padding-m-d: var(--padding-m-d);
$padding-l-g: var(--padding-l-g);
$padding-x-l: var(--padding-x-l);
$padding-content-horizontal-l-g: var(--padding-content-horizontal-l-g);
$padding-content-vertical-l-g: var(--padding-content-vertical-l-g);
$padding-content-horizontal: var(--padding-content-horizontal);
$padding-content-vertical: var(--padding-content-vertical);
$padding-content-horizontal-s-m: var(--padding-content-horizontal-s-m);
$padding-content-vertical-s-m: var(--padding-content-vertical-s-m);
$margin-x-x-s: var(--margin-x-x-s);
$margin-x-s: var(--margin-x-s);
$margin-s-m: var(--margin-s-m);
$margin: var(--margin);
$margin-m-d: var(--margin-m-d);
$margin-l-g: var(--margin-l-g);
$margin-x-l: var(--margin-x-l);
$margin-x-x-l: var(--margin-x-x-l);
$box-shadow: var(--box-shadow);
$box-shadow-secondary: var(--box-shadow-secondary);
$box-shadow-tertiary: var(--box-shadow-tertiary);
$screen-x-s: var(--screen-x-s);
$screen-x-s-min: var(--screen-x-s-min);
$screen-x-s-max: var(--screen-x-s-max);
$screen-s-m: var(--screen-s-m);
$screen-s-m-min: var(--screen-s-m-min);
$screen-s-m-max: var(--screen-s-m-max);
$screen-m-d: var(--screen-m-d);
$screen-m-d-min: var(--screen-m-d-min);
$screen-m-d-max: var(--screen-m-d-max);
$screen-l-g: var(--screen-l-g);
$screen-l-g-min: var(--screen-l-g-min);
$screen-l-g-max: var(--screen-l-g-max);
$screen-x-l: var(--screen-x-l);
$screen-x-l-min: var(--screen-x-l-min);
$screen-x-l-max: var(--screen-x-l-max);
$screen-x-x-l: var(--screen-x-x-l);
$screen-x-x-l-min: var(--screen-x-x-l-min);
$screen-x-x-l-max: var(--screen-x-x-l-max);
$screen-x-x-x-l: var(--screen-x-x-x-l);
$screen-x-x-x-l-min: var(--screen-x-x-x-l-min);
$box-shadow-popover-arrow: var(--box-shadow-popover-arrow);
$box-shadow-card: var(--box-shadow-card);
$box-shadow-drawer-right: var(--box-shadow-drawer-right);
$box-shadow-drawer-left: var(--box-shadow-drawer-left);
$box-shadow-drawer-up: var(--box-shadow-drawer-up);
$box-shadow-drawer-down: var(--box-shadow-drawer-down);
$box-shadow-tabs-overflow-left: var(--box-shadow-tabs-overflow-left);
$box-shadow-tabs-overflow-right: var(--box-shadow-tabs-overflow-right);
$box-shadow-tabs-overflow-top: var(--box-shadow-tabs-overflow-top);
$box-shadow-tabs-overflow-bottom: var(--box-shadow-tabs-overflow-bottom);
$_token-key: var(--_token-key);
$_hash-id: var(--_hash-id);

// margin
$space-lg: 24px;
$space-md: 16px;
$space-sm: 8px;

// radius
$border-radius-sm: 8px;

// border
$color-border: #e5e5e5;

// scrollbar
$scrollbar-bg-color: #c1c1c1;
$scrollbar-track-shadow: inset 0 0 2px #b18933;

$layout-header-height: 64px;
$layout-sider-width: 200px;
$layout-sider-bg-color: $color-bg-base;

@mixin flexbox($direction: null, $wrap: null, $justify: null, $align: null, $gap: null) {
  display: flex;
  flex-direction: $direction;
  flex-wrap: $wrap;
  justify-content: $justify;
  align-items: $align;
  gap: $gap;
}

@mixin status-dot($background: $color-success, $width: 8px, $height: 8px, $margin: 0 6px 0 0) {
  content: '';
  display: inline-block;
  background-color: $background;
  width: $width;
  height: $height;
  border-radius: 50%;
  margin: $margin;
}
