// SPDX-FileCopyrightText: 2022 UnionTech Software Technology Co., Ltd.
//
// SPDX-License-Identifier: GPL-3.0-or-later

@charset "utf-8";

body {
  background-color: var(--body-background-color);
  width: 100%;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

#app {
  width: 100%;
  color: var(--app-word-color);

  a {
    text-decoration: none;
    color: #00162c;
  }
}

.scrollbar>div:last-child {
  width: 6px !important;
  border-radius: 3px !important;

  div {
    background-color: var(--scrollbar-div-background-color) !important;
    cursor: default !important;

    &:hover {
      background-color: var(--scrollbar-div-hover-background-color) !important;
    }
  }

  &:hover {
    width: 8px !important;
    border-radius: 4px !important;
  }
}

body[style*='user-select: none'] {
  .scrollbar>div:last-child {
    width: 8px !important;
    border-radius: 4px !important;

    div {
      background-color: var(--scrollbar-div-select-background-color) !important;
    }
  }
}


div {
  outline: none;

  //if screen is over 4K and webkit-min >= 2 ,the follow setting  will  create some warning...
  //so remove them  now... 

  // @media screen and (-webkit-min-device-pixel-ratio: 1.25) {
  //   border-right: 0.01px solid var(--body-background-color);
  // }
  // @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  //   border-right: 0.01px solid var(--body-background-color);
  // }
  // @media screen and (-webkit-min-device-pixel-ratio: 1.75) {
  //   border-right: 0.01px solid var(--body-background-color);
  // }
  // @media screen and (-webkit-min-device-pixel-ratio: 2) {
  //   border-right: 0.01px solid var(--body-background-color);
  // }
  // @media screen and (-webkit-min-device-pixel-ratio: 2.25) {
  //   border-right: 1px solid var(--body-background-color);
  // }
  // @media screen and (-webkit-min-device-pixel-ratio: 2.5) {
  //   border-right: 1px solid var(--body-background-color);
  // }
  // @media screen and (-webkit-min-device-pixel-ratio: 2.75) {
  //   border-right: 1px solid var(--body-background-color);
  // }
  // @media screen and (-webkit-min-device-pixel-ratio: 3) {
  //   border-right: 1px solid var(--body-background-color);
  // }

  .support-div {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    background-color: var(--nav-hash-word-color);
    display: inline-block;
    position: fixed;
    left: var(--support-position);
    bottom: 25px;

    &:hover {
      cursor: pointer;
      background-color: var(--nav-hash-hover-color);
    }
    &:active {  
      // background-color: blue;  
      background-color: var(--nav-hash-press-color);
    }

    .support {
      position: absolute;
      width: 20px;
      height: 21px;
      top: 14px;
      left: 14px;
    }

    .tooltip-wrapper {
      position: absolute;
      visibility: hidden;
      white-space: nowrap;
      right: -15px;
      bottom: -23px;
      background-color: var(--tips-background-color);
      color: var(--nav-hove-word-color);
      max-width: 500px;
      padding: 2px 5px;
      border-radius: 8px;
      border: 1px solid var(--tips-border-color);
      font-family: var(--nav-world-font-family);
      box-shadow: 0px 3px 20px var(--tips-shadow-color);
    }

    .tooltip-wrapper.show {
      visibility: visible;
    }
  }

  .store-div {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    background-color: var(--nav-hash-word-color);
    display: inline-block;
    position: fixed;
    left: var(--support-position);
    bottom: 83px;
    z-index: 10;
    visibility: var(--app-store-visibility);
    // box-shadow: 0px 4px 6px var(--active-shadow-color);

    &:hover {
      cursor: pointer;
      background-color: var(--nav-hash-hover-color);
    }
    &:active {  
      // background-color: blue;  
      background-color: var(--nav-hash-press-color);
    }

    .store {
      position: absolute;
      width: 20px;
      height: 21px;
      top: 14px;
      left: 14px;
    }

    .tooltip-wrapper {
      position: absolute;
      visibility: hidden;
      white-space: nowrap;
      right: -15px;
      bottom: -23px;
      background-color: var(--tips-background-color);
      color: var(--nav-hove-word-color);
      max-width: 500px;
      padding: 2px 5px;
      border-radius: 8px;
      border: 1px solid var(--tips-border-color);
      font-family: var(--nav-world-font-family);
      box-shadow: 0px 3px 20px var(--tips-shadow-color);
    }

    .tooltip-wrapper.show {
      visibility: visible;
    }
  }
}