/* Normalize */
@import 'utils/normalize';

/* Var */
@import 'var/antd';
@import 'var/antd-extra';
@import 'var/gradioRoot';
@import 'var/gradioDark';

/* Components */
@import 'components/container';
@import 'components/prose';
@import 'components/options';
@import 'components/modal';
@import 'components/sliders';
@import 'components/button';
@import 'components/table';
@import 'components/prompt-textarea';
@import 'components/gallery';
@import 'components/quicksetting';
@import 'components/extra-network';
@import 'components/footer';
@import 'components/draggable-container';
@import 'components/header';

/* Tabs */
@import 'tabs/tabs';
@import 'tabs/tab-to-img';
@import 'tabs/tab-setting';
@import 'tabs/tab-extra';

/* Extensions */
@import 'extensions/llul';
@import 'extensions/aspect-ratio';
@import 'extensions/image-browser';
@import 'extensions/preset-manager';
@import 'extensions/civitai-helper';
@import 'extensions/system-info';
@import 'extensions/dreambooth';
@import 'extensions/additional-networks';
@import 'extensions/open-outpaint';

/* Root */
:root {
  /* stylelint-disable */
  --fill-available: 100%;
  @supports (width: -webkit-fill-available) {
    --fill-available: -webkit-fill-available;
  }
  @supports (width: -moz-available) {
    --fill-available: -moz-available;
  }
  /* stylelint-enable */
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--color-text);
  text-size-adjust: 100%;

  background-image: var(--color-body-background);
  background-repeat: no-repeat;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

gradio-app {
  background: unset !important;
}

pre,
code {
  font-family: var(--font-family-code);
}

h1 {
  font-size: var(--font-size-heading1);
  line-height: var(--line-height-heading1);
  color: var(--color-text);
}

h2 {
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading2);
  color: var(--color-text);
}

h3 {
  font-size: var(--font-size-heading3);
  line-height: var(--line-height-heading3);
  color: var(--color-text);
}

h4 {
  font-size: var(--font-size-heading4);
  line-height: var(--line-height-heading4);
  color: var(--color-text);
}

h5 {
  font-size: var(--font-size-heading5);
  line-height: var(--line-height-heading5);
  color: var(--color-text);
}

a {
  text-decoration: none;
}

.anticon-replace {
  display: inline-block !important;
  color: var(--color-text) !important;
}
