
@import '@/styles/style-helpers.scss';
@import '@/styles/media-queries.scss';

/* Essential global page layout styles */
html {
  padding: 0;
  margin: -3px 0 0 0;
  transition: all 1s;
  @extend .scroll-bar;
  @extend .highlight;
  box-sizing: border-box;
  /* Essential body styles */
  body {
    background: var(--background);
    margin: 0;
    padding: 0;
  }
  /* Make links have pointy cursor */
  input[type=button], button, a {
    cursor: pointer;
  }
}

#dashy {
  position: relative;
  min-height: 100vh;
}

/* Hide text, and show 'Loading...' while Vue is initializing tags */
[v-cloak] > * { display:none }
[v-cloak]::before { content: "loading…" }

/* Default size for inline SVG icons (vite-svg-loader renders them without dimensions) */
button svg, a svg {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

/* Small uppercase label above a form control */
.options-label,
.theme-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--config-settings-color);
  opacity: 0.75;
}

/* Row of icon buttons used as a multi-option toggle */
.display-options {
  display: flex;
  gap: 0.35rem;
  color: var(--settings-text-color);
  svg {
    flex: 1;
    height: 1.75rem;
    padding: 0.3rem;
    box-sizing: border-box;
    background: var(--background);
    border: 1px solid currentColor;
    border-radius: var(--curve-factor);
    cursor: pointer;
    &:hover, &.selected {
      background: var(--settings-text-color);
      color: var(--background);
    }
  }
}

/* v-select, dropdown styles */
.v-select {
  .vs__dropdown-toggle {
    border-color: var(--primary);
    background: var(--background);
    cursor: pointer;
    span.vs__selected {
      color: var(--primary);
    }
    .vs__actions svg path { fill: var(--primary); }
  }
  ul.vs__dropdown-menu {
    background: var(--background);
    border-color: var(--primary);
    li {
      color: var(--primary);
      &:hover {
        color: var(--background);
        background: var(--primary);
      }
      &.vs__dropdown-option--highlight {
        color: var(--background);
        background: var(--primary);
      }
    }
  }
}
