@import './var';

.var-site {
  &--box {
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }
  }

  &--relative {
    position: relative;
  }

  &--absolute {
    position: absolute;
  }

  &--hidden {
    overflow: hidden;
  }

  &--lock {
    overflow: hidden;
  }

  &--block {
    display: block;
  }

  &--inline-block {
    display: inline-block;
  }

  &--flex {
    display: flex;
  }

  &--inline-flex {
    display: inline-flex;
  }
}

:root {
  --site-font-size-xs: @site-font-size-xs;
  --site-font-size-sm: @site-font-size-sm;
  --site-font-size-md: @site-font-size-md;
  --site-font-size-lg: @site-font-size-lg;
  --site-icon-size-xs: @site-icon-size-xs;
  --site-icon-size-sm: @site-icon-size-sm;
  --site-icon-size-md: @site-icon-size-md;
  --site-icon-size-lg: @site-icon-size-lg;
  --site-color-primary: @site-color-primary;
  --site-color-info: @site-color-info;
  --site-color-success: @site-color-success;
  --site-color-warning: @site-color-warning;
  --site-color-danger: @site-color-danger;
  --site-color-disabled: @site-color-disabled;
  --site-cubic-bezier: @site-cubic-bezier;
  --site-shadow-key-umbra-opacity: @site-shadow-key-umbra-opacity;
  --site-shadow-key-penumbra-opacity: @site-shadow-key-penumbra-opacity;
  --site-shadow-key-ambient-opacity: @site-shadow-key-ambient-opacity;
}