/* Write your global styles here, in PostCSS syntax */
@import "highlight.js/styles/atom-one-dark.css";

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import "./styles/reset.css";
@import "./styles/vars.css";
@import "./styles/tippy.css";

html,
body {
  scroll-behavior: smooth !important;
  color: var(--text-color);
  /* font-family: var(--sans-serif); */
}

svg.icon {
  vertical-align: calc(-1 * var(--icon-adjust));
  flex: 0 0 auto;
  height: 1em;
  width: 1em;
  fill: currentColor;
}

input:not([type]), input[type="text"], input[type="number"] {
  border: 1px solid var(--gray-3);
  padding: var(--size-2) var(--size-3);
  border-radius: 6px;
}

/* Hide up and down arrows in numeric input fields */

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;
  appearance: textfield;
}

/* It makes the HTML progress bar filling smooth when value change. */
progress::-webkit-progress-value {
  transition: 0.6s width ease-out;
}

@layer base {
  .btn-gradient {
    @apply !bg-gradient !bg-[length:300%_300%] hover:saturate-[1.2] shadow duration-100 !border-0 !border-transparent !bg-transparent animate-shimmer disabled:!bg-none disabled:!bg-gray-500/30  !text-white;
  }
  .btn {
    @apply !capitalize;
  }
}


/* Components */

.controls-section {
  display: flex;
  flex-direction: column;

  & + & {
    margin-top: var(--size-4);
    padding-top: var(--size-4);
    border-top: 1px solid var(--gray-3);
  }

  > * + * {
    margin-top: var(--size-3);
  }

  h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: lowercase;
    font-variant: small-caps;
    font-size: var(--text-small);
    color: var(--gray-4);
    font-weight: 600;
  }
}

.subcontrol::before {
  content: '└';
  color: var(--gray-3);
}

.checkbox-group {
  display: flex;
  flex-direction: column;

  & > * {
    display: flex;
    align-items: center;
    padding: var(--size-2);
  }

  input {
    margin-right: var(--size-2);
  }

  .tooltip {
    margin-left: auto;
  }

  .checked {
    background-color: var(--blue-1);
  }
}

.labeled-input {
  display: flex;
  flex-direction: column;

  & > span {
    font-size: var(--text-small);
  }

  & > input {
    margin-top: var(--size-1);
    width: 100%;
  }
}

.tooltip-container,
.checkbox-group > *,
.labeled-input {
  --tooltip-opacity: .15;

  &:hover {
    --tooltip-opacity: .5;
  }
}

input.input-inline {
  padding: .25em;
  height: 1.5em;
  width: 2em;
  max-width: 100%;
  text-align: center;
}

.has-error {
  box-shadow: 0 0 var(--size-1) var(--red-2);
}

.import-link {
  color: inherit;
}

.glimmery {
  background: conic-gradient(rgb(196, 181, 253), rgb(110, 231, 183), rgb(249, 168, 212))
}