@import './base.css';
@import './theme.scss';

#app {
  width: 100vw;
  height: 100svh;
  margin: 0;
  padding: 0;
  font-weight: normal;
  user-select: none;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

strong {
  font-weight: bold;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

/* I did */
:root {
  --color-tag-1: red;
  --color-tag0: lightblue;
  --color-tag1: indianred;
  --color-tag2: red;
  --color-tag3: violet;
  --color-tag4: lightgreen;
  --color-tag5: orange;
}

label {
  color: var(--color-label)
}

button {
  background: var(--color-button);
  color: var(--color-button-text);
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
}
button:hover {
  background: var(--color-button-hover);
  cursor: pointer;
}
button:disabled {
  background: var(--color-disabled);
  color: var(--color-background-mute);
  cursor: not-allowed;
  transition: background 0.5s;
}

input,
textarea {
  background-color: var(--color-background);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  box-sizing: border-box;
  margin: 2px 0;
  padding: 5px 10px;
  font-family: inherit;
}
input:disabled,
textarea:disabled {
  background: var(--color-background-mute);
  color: var(--color-disabled);
  transition: background 0.5s;
}

/* Range input - cross browser support */
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 18px;
  background-color: var(--color-text-secondary);
  outline: 3px solid var(--color-text-secondary);
  outline-offset: -1px;
  border-radius: 2px;
  pointer-events: initial;
  transition: background-color 0.2s, outline-color 0.2s;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  background-color: var(--color-text);
  outline-color: var(--color-text);
}

input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 18px;
  background-color: var(--color-text-secondary);
  border: none;
  border-radius: 2px;
  outline: 3px solid var(--color-text-secondary);
  outline-offset: -1px;
  transition: background-color 0.2s, outline-color 0.2s;
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
  background-color: var(--color-text);
  outline-color: var(--color-text);
}

input[type="range"]::-moz-range-track {
  background: var(--color-border);
  height: 4px;
  border-radius: 2px;
}

input[type="range"]::-moz-focus-outer {
  border: 0;
}

input[type="range"]::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
  height: 4px;
}

input[type="range"]::-ms-thumb {
  width: 11px;
  height: 18px;
  background-color: var(--color-text-secondary);
  border: none;
  border-radius: 2px;
}

input[type="range"]:hover::-ms-thumb,
input[type="range"]:focus::-ms-thumb {
  background-color: var(--color-text);
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
