@import 'fonts';
@import 'mixins';

/*
Hues
000: Red
040: Orange
060: Yellow
125: Green
175: Teal
225: Blue
250: Purple
300: Pink
*/

:root {
   --error-hue: 0;
   --text-on-dark-color: #ddd;

   --text-hue: 0;
   --text-color: hsl(var(--text-hue), 0%, 13%);

   --error-color: hsl(0, 98%, 32%);
   --affirm-color: rgb(139, 228, 105);

   --space: 10px;
   --tablet-width: 768px;
   --desktop-width: 1024px;
   --form-font-size: 30px;
   --form-back-color: #eee;

   --background-hue: 50;
   --background-color: hsl(var(--background-hue), 5%, 75%);
   --background-dark: hsl(var(--background-hue), 10%, 50%);
   --background-darker: hsl(var(--background-hue), 10%, 30%);
   --background-darkest: hsl(var(--background-hue), 10%, 30%);
   --background-light: hsl(var(--background-hue), 10%, 90%);
   --background-lightest: hsl(var(--background-hue), 10%, 97%);

   --trim-color: --var(--background-dark);

   --primary-hue: 190;
   --primary-color: hsl(var(--primary-hue), 60%, 60%);
   --primary-dark: hsl(var(--primary-hue), 100%, 40%);
   --primary-darker: hsl(var(--primary-hue), 75%, 35%);
   --primary-darkest: hsl(var(--primary-hue), 75%, 20%);
   --primary-light: hsl(var(--primary-hue), 20%, 85%);

   --highlight-hue: 39;
   --highlight-color: hsl(var(--highlight-hue), 100%, 50%);
   --highlight-dark: hsl(var(--highlight-hue), 100%, 40%);
   --highlight-bright: hsl(var(--highlight-hue), 100%, 80%);

   --link-color: hsl(var(--primary-hue), 100%, 40%);
   --icon-color: var(--text-color);
   --input-radius: 6px;
   --icon-size: 2em;

   /* https://css-tricks.com/snippets/css/system-font-stack/ */
   /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
   --san-serif-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
      'Helvetica Neue', sans-serif;

   &.dark-mode {
      @include darkMode();
   }
}

// TODO: find way to make this set the initial value but not force it
// @media (prefers-color-scheme: dark) {
//    :root {
//       @include darkMode();
//    }
// }

body {
   color: var(--text-color);
   font-family: var(--san-serif-font);
   /* https://css-tricks.com/fun-viewport-units/ */
   font-size: 18px; //calc(16px + 0.5vw);
   background-color: var(--background-color);
   margin: 0;
   padding: 0;
}

button {
   height: var(--icon-size);
   cursor: pointer;
   border: none;
   background: transparent;

   toba-svg {
      svg {
         height: var(--icon-size);
         width: var(--icon-size);
      }
   }
}

a {
   color: var(--link-color);
   text-decoration: none;
   cursor: pointer;

   &:hover {
      text-decoration: underline;
      text-decoration-skip: auto;
   }
}

svg {
   transform: inherit;
   height: inherit;
   width: inherit;
   // these values are for used SVGs so they inherit the value of the parent
   // use element
   path,
   circle,
   ellipse {
      color: inherit;
      fill: inherit;
      stroke: inherit;
      stroke-width: inherit;
   }
}
svg,
svg > use {
   stroke: var(--icon-color);

   &.no-fill {
      fill: none;
   }
   &.no-stroke {
      stroke: none;
   }
   &.streamline.light {
      fill: none;
      stroke-width: 1.5px;
   }
   &.streamline.bold {
      stroke: none;
   }
}

h1,
h2,
h3,
h4 {
   font-family: var(--san-serif-font);
}

input,
button,
select {
   font-family: var(--san-serif-font);

   &:focus {
      outline: none;
   }
}

/*
 or rings
https://codepen.io/chrisunderdown/pen/JeXNoz
https://codepen.io/Jackthomsonn/pen/GjVPWX
https://codepen.io/rikschennink/pen/rpNGyy
https://codepen.io/melnik909/pen/BZpJLN
 */

/* https://github.com/mladenplavsic/css-ripple-effect */
.ripple {
   position: relative;
   overflow: hidden;
   transform: translate3d(0, 0, 0);

   &:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(
         circle,
         var(--highlight-color) 10%,
         transparent 5%
      );
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.3s, opacity 1s;
   }

   &:active:after {
      transform: scale(0, 0);
      opacity: 0.8;
      transition: 0s;
   }
}