@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /*
   * Workaround to allow proper bottom positioning for fixed
   * elements in mobile browsers with collapsing url bars:
   * https://stackoverflow.com/a/17555766/1137077
   */
  :root,
  html,
  body {
    @apply h-full min-h-full;
  }
  #root {
    @apply h-full min-h-full;
  }
}

.semi-form-vertical .semi-form-field {
  margin: 0;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  overflow: hidden;
}

.semi-card .semi-collapse-item {
  border: none !important;
}

.semi-button.semi-button-light {
  background-color: rgba(var(--semi-grey-1), 1);
}

.semi-button.semi-button-light:hover {
  background-color: rgba(var(--semi-grey-2), 1);
}

.semi-button.semi-button-primary:not(.semi-button-light):not(
    .semi-button-borderless
  ) {
  background-color: rgba(var(--semi-blue-5), 1);
}

.semi-button.semi-button-primary:not(.semi-button-light):not(
    .semi-button-borderless
  ):hover {
  background-color: rgba(var(--semi-blue-6), 1);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  opacity: 0;
}

::-webkit-scrollbar-corner {
  opacity: 0;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--semi-grey-2), 1);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--semi-grey-3), 1);
}

.theme {
  color: var(--semi-color-text-1);
  background-color: var(--semi-color-bg-0);
}

.sidesheet-theme {
  color: var(--semi-color-text-1);
  background-color: var(--semi-color-bg-2);
}

.popover-theme {
  color: var(--semi-color-text-1);
  background-color: var(--semi-color-bg-3);
}

.card-theme {
  color: var(--semi-color-text-1);
  background-color: rgba(var(--semi-grey-0), 1);
}

.toolbar-theme {
  background-color: rgba(var(--semi-grey-1), 1);
}

.hover-1:hover {
  background-color: rgba(var(--semi-grey-1), 1);
}

.bg-semi-grey-2 {
  background-color: rgba(var(--semi-grey-2), 1);
}

.hover-2:hover {
  background-color: rgba(var(--semi-grey-2), 1);
}

.text-color {
  color: var(--semi-color-text-1);
}

.border-color {
  border-color: rgba(var(--semi-grey-9), 0.08);
}

.table-border {
  border-color: rgba(var(--semi-grey-2), 1);
}

.bg-dots {
  background-color: white;
  opacity: 0.8;
  background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
  background-size: 20px 20px;
}