@import './reset.scss';
@import './theme.scss';

* {
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--scroll-thumb-color);

    &:hover {
      background-color: var(--scroll-thumb-color-hover);
    }
  }

  &::selection {
    background-color: #b4d0f6;
  }
}

@font-face {
  font-family: JetBrainsMono;

  src: url('../font/JetBrainsMono.woff2') format('woff2');
  font-display: auto;
}

html {
  background-color: transparent !important;

  font-size: 14px;
}

body {
  overflow: hidden;

  word-break: break-all;

  color: var(--color-text-1);

  font: 1rem/1 JetBrainsMono;
}

a {
  color: rgb(var(--primary-6));
}

code {
  font-family: JetBrainsMono !important;
}

.bordered {
  border: 1px solid var(--color-border);
}

.bordered-transparent {
  border: 1px solid transparent;
}

.bordered-top {
  border-top: 1px solid var(--color-border);
}

.bordered-right {
  border-right: 1px solid var(--color-border);
}

.bordered-bottom {
  border-bottom: 1px solid var(--color-border);
}

.bordered-left {
  border-left: 1px solid var(--color-border);
}

.frosted {
  position: relative;

  background-color: var(--frosted-background);

  &::before,
  &::after {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    content: '';

    background-color: inherit;

    filter: blur(24px);
  }
}

.mark {
  color: rgb(var(--primary-6));
  background-color: transparent;
}

.arco-popover-content {
  margin-top: 0;
}
