#tailchat-app {
  @apply text-typography-light;

  --tc-background-image: url(../../assets/images/bg.jpg);

  .tc-background {
    @apply bg-center bg-cover bg-no-repeat;
    background-image: var(--tc-background-image);
  }

  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  ::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-black bg-opacity-10;
    border-color: transparent;
    background-clip: padding-box;
    border-width: 4px;
    border-style: solid;
    border-radius: 8px;

    &:hover {
      @apply bg-black bg-opacity-20;
    }
  }

  ::-webkit-scrollbar-track {
    @apply bg-black bg-opacity-5;
    border-color: transparent;
    background-clip: padding-box;
    border-width: 4px;
    border-style: solid;
    border-radius: 8px;
  }

  // 深色模式覆盖
  &.dark {
    @apply text-typography-dark;

    ::-webkit-scrollbar-corner {
      background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #202225;

      &:hover {
        background-color: #202225;
      }
    }

    ::-webkit-scrollbar-track {
      background-color: #2f3136;
    }
  }
}
