@import "partials/theme";
@import "partials/typography-mixins";


* {
  //font-family: 'Manrope', sans-serif;
}

html, body {
  background-color: $background-dark-0;
  color: $gray-600;
  scrollbar-gutter: stable;
  padding: 0 !important;
}

html {
  overflow-y: scroll;
}

.icon{
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

*{
  scrollbar-color: $white $background-dark-100;
  scrollbar-width: thin;
  &:hover, &:focus{
    scrollbar-color: $black $background-dark-200;
  }
}
*::selection{
  background-color: $gray-200;
}
::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb{
  background-clip: padding-box;
  transition: all 0.2s ease-in-out;
  background-color: $gray-400;
  &:hover{
    background-color: $background-dark-200;
  }
}

::-webkit-scrollbar-corner {
  background: rgba(0,0,0,0);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

textarea::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background: transparent;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:active,
select:-webkit-autofill:focus {
  @include body-secondary;
  -webkit-text-fill-color: $gray-600;
  -webkit-box-shadow: 0 0 0 1000px $background-dark-0 inset !important;
  //font-family: 'Manrope', sans-serif;
  transition: all 0s 50000s;
  background-clip: content-box !important;
}

