@use 'themes';
@import '@fortawesome/fontawesome-free/css/all.min.css';

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  color: var(--default-textcolor);
  background-color: var(--default-background);
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0) 0 0 0;
  // padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
  //   env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI Light',
    '微软雅黑', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: 12px;
  line-height: 1.4;

  a {
    color: var(--a-color);
  }

  .swal2-popup,
  .swal2-popup.swal2-toast {
    background-color: var(--alert-bg);

    .swal2-content,
    .swal2-title,
    .swal2-html-container,
    .swal2-checkbox,
    .swal2-validation-message {
      color: var(--default-textcolor);
      background: transparent;

      progress {
        width: 100%;
        height: 5px;
      }
    }

    .swal2-styled.swal2-confirm {
      background-color: var(--primary-color-depth3);
    }

    .swal2-select {
      background-color: var(--alert-bg) !important;
      color: var(--default-textcolor) !important;
    }
  }
}

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

/* Track */
::-webkit-scrollbar-track {
  background: rgba(127, 127, 127, 0.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.4);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(127, 127, 127, 0.9);
}
