body {
  @apply dark:bg-zinc-800;
  font-family: PingFang, Arial, Helvetica, sans-serif !important;
  overflow: hidden;
}

*::selection {
  @apply text-black bg-blue-200;
}

/* common  */
.hover-show-parent > .hover-show-child {
  display: none;
}

.hover-show-parent:hover>.hover-show-child {
  display: block;
}

.line-clamp-2 {
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* background */
.bg-loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background:%23f4f5f6' width='43' height='43' preserveAspectRatio='xMidYMid' viewBox='0 0 43 43'%3E%3Cg transform='scale(.17)'%3E%3Cdefs%3E%3Cg id='a' fill='%23fff'%3E%3Cpath d='M256-128h128l-512 512V256zM384 0v128L128 384H0z'/%3E%3C/g%3E%3C/defs%3E%3Cg id='jsw.im' transform='translate(196.208)'%3E%3Cuse href='%23a' x='-256'/%3E%3Cuse href='%23a'/%3E%3CanimateTransform attributeName='transform' type='translate' keyTimes='0;1' repeatCount='indefinite' dur='0.5s' values='0 0; 256 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.dark .bg-loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background:%233f3f46' width='43' height='43' preserveAspectRatio='xMidYMid' viewBox='0 0 43 43'%3E%3Cg transform='scale(.17)'%3E%3Cdefs%3E%3Cg id='a' fill='%2318181b'%3E%3Cpath d='M256-128h128l-512 512V256zM384 0v128L128 384H0z'/%3E%3C/g%3E%3C/defs%3E%3Cg id='jsw.im' transform='translate(196.208)'%3E%3Cuse href='%23a' x='-256'/%3E%3Cuse href='%23a'/%3E%3CanimateTransform attributeName='transform' type='translate' keyTimes='0;1' repeatCount='indefinite' dur='0.5s' values='0 0; 256 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-grid-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%231A202C' d='M0 0h10v10H0zM10 10h10v10H10z'/%3E%3Cpath fill='%232D3748' d='M10 0h10v10H10zM0 10h10v10H0z'/%3E%3C/svg%3E");
}

.bg-grid-light {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M0 0h10v10H0zM10 10h10v10H10z'/%3E%3Cpath fill='%23EDF2F7' d='M10 0h10v10H10zM0 10h10v10H0z'/%3E%3C/svg%3E");
}

/* window and entry */
.gagu-user-desktop .gagu-entry-node:not(.is-selected) .gagu-entry-node-name {
  text-shadow: 0 0 4px rgba(0, 0, 0, .9);
  color: rgba(255, 255, 255, .95);
}

.gagu-user-desktop .gagu-entry-node .gagu-entry-node-size {
  text-shadow: 0 0 4px rgba(0, 0, 0, .9);
  color: rgba(255, 255, 255, .6);
}

.gagu-user-desktop:not(.is-top-window) .gagu-entry-node[data-selected="true"] .gagu-entry-node-name,
.gagu-app-window:not(.is-top-window) .gagu-entry-node.is-list-mode[data-selected="true"],
.gagu-app-window:not(.is-top-window) .gagu-entry-node.is-grid-mode[data-selected="true"] .gagu-entry-node-name {
  @apply bg-zinc-400 dark:bg-zinc-600;
}

.gagu-app-window[data-hidden="true"] {
  display: none !important;
}

.gagu-window-drag-handler:hover + .gagu-window-drag-handler-hover-mask {
  display: block;
}

.gagu-work-area-lasso {
  @apply hidden absolute z-10 border box-content border-zinc-400 bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-5 pointer-events-none;
}

.gagu-dragging-children-events-none .gagu-entry-node[data-entry-type="file"] {
  @apply pointer-events-none;
}

.gagu-dragging-grayscale {
  @apply opacity-20 grayscale;
}

.gagu-dragenter-outline {
  @apply animate-pulse;
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  animation-duration: 2s;
}

.gagu-dragenter-outline[data-is-drag-drop-node="true"] * {
  @apply pointer-events-none;
}

.gagu-dragenter-outline.gagu-file-explorer-status-bar-folder {
  outline-offset: -1px;
}

.gagu-entry-node[data-entry-type="directory"]::after,
.gagu-file-explorer-side-entry::after,
.gagu-file-explorer-status-bar-folder::after {
  @apply content-[""] block absolute z-[-1] top-0 bottom-0 left-0 w-0 bg-blue-200 bg-opacity-40;
}

.gagu-dragenter-outline.gagu-entry-node::after,
.gagu-dragenter-outline.gagu-file-explorer-side-entry::after,
.gagu-dragenter-outline.gagu-file-explorer-status-bar-folder::after {
  @apply w-full;
  transition: width 1.5s linear;
}

.gagu-entry-node.clipboard-copy::after,
.gagu-entry-node.clipboard-cut::after {
  @apply absolute z-10 top-0 left-0 block m-1 w-3 h-3 bg-no-repeat bg-contain bg-center;
  content: "";
}

.gagu-entry-node.is-list-mode.clipboard-copy::after,
.gagu-entry-node.is-list-mode.clipboard-cut::after {
  @apply m-0 w-2 h-2;
}

.gagu-entry-node.clipboard-copy::after {
  background-image: url("data: image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='24' height='24' rx='4' fill='%233B82F6' /%3E%3Cpath d='M7.555 7.1h.5V3.9c0-.227.18-.4.39-.4H19.11c.21 0 .389.173.389.4v12.6c0 .227-.18.4-.389.4h-3.167v3.2c0 .224-.179.4-.395.4H4.896a.396.396 0 0 1-.395-.4l.002-12.6c0-.224.18-.4.395-.4h2.658zm-1.775.8h-.5v.5l-.002 10.8v.5h9.889V7.9H5.78zm3.053-1.3v.5h7.111v9h2.778V4.3H8.833v2.3z' fill='%23fff' stroke='%23fff' /%3E%3C/svg%3E");
}

.gagu-entry-node.clipboard-cut::after {
  background-image: url("data: image/svg+xml, %3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Crect width='24' height='24' rx='4' fill='%233B82F6' /%3E%3Cpath d='M9.446 8.029L12 10.582l6.728-6.727a2 2 0 0 1 2.828 0l-12.11 12.11a4 4 0 1 1-1.414-1.414l2.554-2.554-2.554-2.554a4 4 0 1 1 1.414-1.414zm5.38 5.379l6.73 6.73a2 2 0 0 1-2.828 0l-5.317-5.316 1.415-1.414zm-7.412 3.175a2 2 0 1 0-2.828 2.828 2 2 0 0 0 2.828-2.829zm0-9.172a2 2 0 1 0-2.828-2.828A2 2 0 0 0 7.414 7.41z' fill='%23fff' /%3E%3C/svg%3E");
}

/* customized-scrollbar */
[data-customized-scrollbar] ::-webkit-scrollbar,
[data-customized-scrollbar] ::-webkit-scrollbar-button,
[data-customized-scrollbar] ::-webkit-scrollbar-track-piece,
[data-customized-scrollbar] ::-webkit-scrollbar-corner,
[data-customized-scrollbar] ::-webkit-resizer {
  background: none;
}

[data-customized-scrollbar] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-customized-scrollbar] ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, .1);
}

[data-customized-scrollbar] ::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: rgba(0, 0, 0, .2);
}

.scrollbar-hidden::-webkit-scrollbar {
  width: 0;
}

/* volume-slider */
.gagu-volume-slider {
  appearance: none;
  width: 95px;
  height: 2px;
  transform: rotate(270deg) translateX(-100px) translateY(16px);
  @apply bg-white bg-opacity-50 origin-left cursor-pointer;
}

.gagu-volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 8px;
  @apply bg-white rounded-full;
}

/* semi ui */
.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless) {
  background-color: var(--semi-color-primary);
}

.semi-button-light:not(.semi-button-borderless) {
  background-color: var(--semi-color-fill-0);
}

.semi-form-field-extra {
  @apply text-xs !important;
}

.semi-button {
  @apply transition-all duration-200;
}

.semi-button.semi-button-disabled {
  @apply bg-gray-100 cursor-not-allowed dark:bg-zinc-700;
}

.gagu-use-form-dialog .semi-modal-mask,
.gagu-confirmor .semi-modal-mask {
  @apply bg-black bg-opacity-10 !important;
}

.gagu-use-form-dialog .semi-modal-content {
  @apply border-none;
}

.gagu-side-drawer .semi-sidesheet-inner {
  @apply bg-white bg-opacity-60 backdrop-blur-lg max-w-[90vw] dark:bg-zinc-700 dark:bg-opacity-40;
}

.gagu-confirmor .semi-modal-content {
  @apply bg-white bg-opacity-90 backdrop-blur border-none dark:bg-zinc-700 dark:bg-opacity-80;
}

.gagu-touch-open-with-apps .semi-modal-mask {
  @apply bg-black bg-opacity-10 !important;
}

.gagu-touch-open-with-apps .semi-modal {
  @apply absolute right-[8px] bottom-[8px] left-[8px] m-0 w-auto;
}

.gagu-touch-open-with-apps .semi-modal-content {
  @apply p-2 bg-white bg-opacity-90 backdrop-blur border-none dark:bg-zinc-700 dark:bg-opacity-90;
}

.gagu-touch-open-with-apps .semi-modal-body-wrapper {
  @apply m-0;
}

.gagu-entry-picker .semi-modal-content {
  padding: 0 16px;
}

.gagu-entry-picker .semi-modal-body-wrapper {
  margin: 16px 0 0 0;
}

.gagu-entry-picker .semi-modal-footer {
  margin: 16px 0 20px 0;
}

.gagu-entry-picker-touch .semi-sidesheet-title {
  flex: unset;
  width: 100%;
}

.gagu-text-editor-photo-slider .PhotoView-Slider__Backdrop {
  @apply bg-black bg-opacity-30 backdrop-blur-sm dark:bg-opacity-70 !important;
}

.gagu-text-editor-photo-slider .PhotoView-Slider__BannerWrap {
  @apply bg-black bg-opacity-30 backdrop-blur;
}

.gagu-text-editor-photo-slider .PhotoView-Slider__ArrowLeft,
.gagu-text-editor-photo-slider .PhotoView-Slider__ArrowRight {
  @apply rounded-full;
}

.gagu-app-music-player-immersive-theatre .semi-modal-content {
  @apply p-0;
}

/* animate */
@keyframes shake-x {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

.animate-shake-x {
  animation: shake-x 500ms infinite;
}
