@font-face {
  font-family: 'Barlow';
  font-weight: normal;
  src: url('~@/assets/fonts/Barlow-Regular.woff2') format('woff2'),
    url('~@/assets/fonts/Barlow-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: medium;
  src: url('~@/assets/fonts/Barlow-Medium.woff2') format('woff2'),
    url('~@/assets/fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 600;
  src: url('~@/assets/fonts/Barlow-SemiBold.woff2') format('woff2'),
    url('~@/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: bold;
  src: url('~@/assets/fonts/Barlow-Bold.woff2') format('woff2'),
    url('~@/assets/fonts/Barlow-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 800;
  src: url('~@/assets/fonts/Barlow-ExtraBold.woff2') format('woff2'),
    url('~@/assets/fonts/Barlow-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 900;
  src: url('~@/assets/fonts/Barlow-Black.woff2') format('woff2'),
    url('~@/assets/fonts/Barlow-Black.ttf') format('truetype');
}

:root {
  --color-body-bg: #ffffff;
  --color-text: #000;
  --color-primary: #335eea;
  --color-primary-bg: #eaeffd;
  --color-secondary: #7a7a7b;
  --color-secondary-bg: #f5f5f7;
  --color-navbar-bg: rgba(255, 255, 255, 0.86);
  --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
  --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
  --html-overflow-y: overlay;
}

[data-theme='dark'] {
  --color-body-bg: #222222;
  --color-text: #ffffff;
  --color-primary: #335eea;
  --color-primary-bg: #bbcdff;
  --color-secondary: #7a7a7b;
  --color-secondary-bg: #323232;
  --color-navbar-bg: rgba(34, 34, 34, 0.86);
  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
  --color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
}

#app,
input {
  font-family: 'Barlow', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei,
    Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif,
    microsoft uighur;
}
body {
  background-color: var(--color-body-bg);
}

html {
  overflow-y: var(--html-overflow-y);
  min-width: 768px;
  overscroll-behavior: none;
}

select,
button {
  font-family: inherit;
}
button {
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
}
input,
button {
  &:focus {
    outline: none;
  }
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

[data-electron='yes'] {
  button,
  .navigation-links a,
  .playlist-info .description {
    cursor: default !important;
  }
}

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

::-webkit-scrollbar-track {
  background: transparent;
  border-left: 1px solid rgba(128, 128, 128, 0.18);
  background: var(--color-body-bg);
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.38);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--color-secondary-bg);
}

.user-select-none {
  user-select: none;
}
