@use "sass:color";
@use 'fonts';

body,
html {
  margin: 0;
  background-color: #1e2341;
  color: white;
  box-sizing: border-box;
  font-size: 16px;

  @media screen and (max-width: 700px) {
    font-size: calc(0.7vw + 0.7rem);
  }
}

#app {
  padding: 0 0.25em;
}

a {
  color: white;
  text-decoration: none;
}

a:visited {
  color: rgb(124, 164, 218);
}

* {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  box-sizing: inherit;
}

button,
select,
input {
  font-size: inherit;
}

button {
  $color: #3c5a89;

  appearance: none;
  outline: none;
  border: none;

  background-color: $color;
  color: white;

  padding: 0.5em 0.5em;

  font-weight: bold;
  font-size: 0.9em;

  cursor: pointer;
  transition: all 75ms;

  &:hover:not([data-disabled='true']),
  &:focus-visible {
    background-color: color.adjust($color, $lightness: 10%);
  }

  &[data-disabled='true'] {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    color: #999;
  }

  &.btn--icon {
    background-color: transparent;
    padding: 0;
  }

  &:focus-visible {
    outline: 1px solid gold;
  }
}

// Text
.text {
  &--accent {
    color: gold;
  }
}

// Card modal
.g-card {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90vw;
  max-width: 550px;

  padding: 0.5em 1em;

  border-radius: 1em;

  background-color: #1d1c33;
  box-shadow: 0 0 6px 1px #414141;
}

// Scrollbar
/* width */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #333;
}

/* Corner */
::-webkit-scrollbar-corner {
  background: #333;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}