@use "src/styles/mixin.scss";

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.sketch-picker {
  background-color: var(--bg-body) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sketch-picker .flexbox-fix {
  border-color: var(--line-divider) !important;
}

.custom-caret {
  @apply caret-fill-default;
}

.sketch-picker [id^='rc-editable-input'] {
  background-color: var(--bg-body) !important;
  border-color: var(--line-divider) !important;
  color: var(--text-title) !important;
  box-shadow: var(--line-border) 0px 0px 0px 1px inset !important;
}


body {
  ::selection {
    @apply bg-bg-selection;
  }

  @apply bg-bg-body text-text-title;

  &[data-os="windows"]:not([data-browser="firefox"]) {
    .appflowy-custom-scroller {
      @include mixin.hidden-scrollbar
    }

    .MuiBox-root {
      @include mixin.scrollbar-style;
    }
  }

  .grid-sticky-header {
    @include mixin.hidden-scrollbar
  }
}


.appflowy-date-picker-calendar {
  width: 100%;
}


.appflowy-scroller {
  @include mixin.scrollbar-style;

}


.appflowy-scrollbar-thumb-horizontal, .appflowy-scrollbar-thumb-vertical {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
  opacity: 60%;
}

.appflowy-scrollbar-track-horizontal, .appflowy-scrollbar-track-vertical {
  background-color: var(--scrollbar-track);

}

.icon {
  font-family: 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla', sans-serif;
}

.view-icon {
  @apply flex w-fit cursor-pointer rounded-lg;
  line-height: 1em;
  font-size: 1.25em;
  white-space: nowrap;
}

.theme-mode-item {
  @apply relative flex h-[72px] w-[88px] cursor-pointer items-end justify-end rounded border hover:shadow;
  background: linear-gradient(150.74deg, rgba(231, 231, 231, 0) 17.95%, #C5C5C5 95.51%);
}

[data-dark-mode="true"] {
  .theme-mode-item {
    background: linear-gradient(150.74deg, rgba(128, 125, 125, 0) 17.95%, #4d4d4d 95.51%);
  }
}

.document-header {
  .view-banner {
    @apply items-center;
  }
}

.tooltip-arrow {
  overflow: hidden;
  position: absolute;
  width: 1em;
  height: 0.71em;
  color: var(--bg-body);

  &:before {
    content: '""';
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: var(--shadow);
    background-color: var(--bg-body);
    transform: rotate(45deg);
  }
}

.grid-row-cell.wrap-cell {
  .primary-cell {
    @apply py-2;
  }

  .text-cell {
    @apply break-words whitespace-pre-wrap overflow-hidden;
  }

  .relation-cell {
    @apply py-2 break-words whitespace-pre-wrap flex-wrap;
  }

  .select-option-cell {
    @apply flex-wrap py-2;
  }
}

@keyframes blink {
  0%, 100% {
    background-color: var(--content-blue-100);
  }
  50% {
    background-color: unset;
  }
}

.blink {
  animation: blink 2s linear infinite;
}

.reply-line {
  width: 28px;
  height: 16px;
  border-left: 2px solid;
  border-top: 2px solid;
  border-color: var(--line-border);
  border-top-left-radius: 6px;
}

.read-more {
  box-shadow: 0px -15px 20px 12px var(--bg-body);
  background-color: transparent;
}

.comment {
  scroll-margin-top: 100px;
}

#addComment {
  scroll-margin-top: 60px;
}

.board-card {
  border-radius: 6px;
  border: 1px solid var(--line-card);
  background: var(--bg-body);

  box-shadow: 0px 2px 8px 2px rgba(31, 35, 41, 0.02), 0px 2px 4px 0px rgba(31, 35, 41, 0.02), 0px 1px 2px -2px rgba(31, 35, 41, 0.02);
}
