/** Global Color Variables **/
$primary-dark: #0C0E0A;
$primary-light: #161913;
$primary-lighter: #2e302b4d;

$some: #0b0b0b52;

$secondary-lighter: #FFFFFFB3;
$secondary-light: #FFFFFF33;
$secondary-dark: #FFFFFF1A;
$secondary-darker: #FFFFFF0D;

$accent-red: #B4475B;
$accent-yellow: #B2B447;
$accent-green: #49B447;
$accent-blue: #4786B4;

/** App's main containers initialisation **/
* {
  user-select: none;
}

input {
  user-select: auto;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  display: flex;
}

/** Global Box Sizing Initialisation **/
* {
  box-sizing: border-box;
}

/** Global Input Initialisation **/
input::-moz-focus-outer {
  border: 0;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 $secondary-lighter;
}

input:focus {
  outline: none;
}


/** Global Typography Styleguide **/
h1 {
  font-family: Roboto-Regular;
  font-size: 24px;
  color: $secondary-lighter;
}

h2 {
  font-family: Roboto-Regular;
  font-size: 16px;
  color: $secondary-lighter;
}

h3 {
  font-family: Roboto-Bold;
  text-transform: uppercase;
  font-size: 12px;
  color: $secondary-lighter;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h4 {
  font-family: Roboto-Bold;
  font-size: 12px;
  color: $secondary-lighter;
  margin: 0;
  padding: 0;
  font-weight: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

p {
  font-family: Roboto-Medium;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  -webkit-font-smoothing: antialiased;
  line-height: 16px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: $secondary-lighter;
  margin: 0;
}

button {
  text-transform: uppercase;
  font-family: Roboto-Regular;
  font-size: 12px;
  color: $secondary-lighter;
  border: none;
}

.label {
  font-family: Roboto-Medium;
  font-size: 12px;
  color: $secondary-lighter;
  margin: 0;
  padding: 0;
  font-weight: normal;
  margin-bottom: 8px;
}

.select_value {
  font-family: Roboto-Bold;
  font-size: 12px;
  color: $secondary-lighter;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.label:after {
  content: ":"
}

.label.disabled {
  color: $secondary-light;
}

/** Global Scrollbar styling */
* {
  scrollbar-color: $secondary-dark $primary-dark;
  scrollbar-width: thin;
  z-index: 0;
}

* .invisible_scrollbar{
  scrollbar-color: transparent;
  scrollbar-width: none;
  z-index: 0;
}

::-webkit-scrollbar {
  background:  $primary-dark;
  width: 5px;
  height: 5px;
  z-index: 0;
}

div.invisible_scrollbar::-webkit-scrollbar {
  background: transparent;
  width: 0px;
  height: 0px;
  z-index: 0;
}


::-webkit-scrollbar-track {
  background:  $primary-dark;
  width: 5px;
  height: 5px;
}

div.invisible_scrollbar::-webkit-scrollbar-track  {
  background: transparent;
  width: 0px;
  height: 0px;
  z-index: 0;
}

::-webkit-scrollbar-thumb {
  background: $secondary-dark;
  width: 5px;
  height: 5px;
}

div.invisible_scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  width: 0px;
  height: 0px;
}
