@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* COLORS */
  --accent-color: #8e6f7e;
  --body-color: #f2f2f2;
  --body-solid-color: white;
  --border-color: #7e5a6c;
  --btn-primary: #6ab7c6;
  --btn-primary-hover: #8fc9d4;
  --btn-secondary: #c77b68;
  --btn-secondary-hover: #d59c8e;
  --carbon-bg: #dadada;
  --card-background: #7e5a6c;
  --footer-color: #344c50;
  --highlight: #C0C0C0;
  --input-background: #ffffff;
  --input-color: #282828;
  --light-shade: #efedef;
  --link-text: #17cfbb;
  --link-active: #5eedde;
  --input-text: #282828;
  --main-color: #14b8a6;
  --modal-background: white;
  --overlay-background: rgba(217, 217, 217, 0.8);

  --footer-background: #919191;

  /* SIZES */
  --fixedSideBar-width: 220px;
  --headerNav-height: 42px;

  /* Z-INDEX */
  --zIndex-default: 1;
  --zIndex-overBase: 2;
  --zIndex-navBar: 3;
  --zIndex-overNavBar: 4;

  --input-element-h: 40px;
  --options-label-width: 140px;
}

@media (min-width: 640px) {
  :root {
    /* --headerNav-height: 48px; */
    --input-element-h: 36px;
  }
}

[data-theme='dark'] {
  --body-color: #222222;
  --body-solid-color: black;
  --carbon-bg: #323232;
  --footer-color: #f3f3ef;
  --highlight: #464646;
  --input-background: rgb(42, 48, 60);
  --input-color: #e1e1e1;
  --input-text: #e1e1e1;
  --overlay-background: rgba(0, 0, 0, 0.8);
  --modal-background: black;
  --footer-background: #383838;
}

html {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body,
html {
  background-color: var(--body-color);
  color: var(--input-color);
  padding: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  letter-spacing: 0.4px;
  transition: background-color 0.3s;
}

body {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  width: 100%;
}

#__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.canvas-container {
  margin: 0 auto;
}

.global-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  /* padding: 4px 8px; */
  width: 100%;
}

@media (min-width: 554px) {
  .global-wrapper {
    max-width: 554px;
    margin: 0 auto;
  }
}

/* This min-width needs to be whatever the sum of our x-margins are plus previous min-width value. */
@media (min-width: 890px) {
  .global-wrapper {
    max-width: 1280px;
    width: calc(100% - 336px);
    margin: 0 168px;
  }
}

@layer base {

  /********** Range Input Styles **********/
  /*Range Reset*/
  input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
  }

  /* Removes default focus */
  input[type='range']:focus {
    outline: none;
  }

  /***** Chrome, Safari, Opera and Edge Chromium styles *****/
  /* slider track */
  input[type='range']::-webkit-slider-runnable-track {
    background-color: #8cf2e7;
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  input[type='range']:disabled::-webkit-slider-runnable-track {
    background-color: #b7b7b5;
  }

  /* slider thumb */
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    margin-top: -2px;
    /* Centers thumb on the track */

    /*custom styles*/
    background-color: #14b8a6;
    border-radius: 50%;
    height: 12px;
    width: 12px;
  }

  input[type='range']:disabled::-webkit-slider-thumb {
    background-color: #b7b7b5;
  }

  input[type='range']:focus::-webkit-slider-thumb {
    border: 1px solid #14b8a6;
    outline: 2px solid #14b8a6;
    outline-offset: 0.125rem;
  }

  /******** Firefox styles ********/
  /* slider track */
  input[type='range']::-moz-range-track {
    background-color: #8cf2e7;
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  /* slider thumb */
  input[type='range']::-moz-range-thumb {
    border: none;
    /*Removes extra border that FF applies*/
    border-radius: 0;
    /*Removes default border-radius that FF applies*/

    /*custom styles*/
    background-color: #14b8a6;
    height: 2rem;
    width: 1rem;
  }

  input[type='range']:focus::-moz-range-thumb {
    border: 1px solid #14b8a6;
    outline: 3px solid #14b8a6;
    outline-offset: 0.125rem;
  }

  input[type='range']:disabled::-moz-range-track {
    background-color: #b7b7b5;
  }

  input[type='range']:disabled::-webkit-slider-thumb {
    background-color: #b7b7b5;
  }

  input[type='range']:disabled::-moz-range-thumb {
    background-color: #b7b7b5;
  }
}

@layer utilities {
  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }

  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}