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

@layer base {
  .light, :root {
    --brand: 249 120 179;
    --bg-primary: 255 255 255;
    --bg-secondary: 231 229 228;
    --bg-tertiary: 214 211 209;
    --bg-darkish: 28 25 23;
    --bg-inverted: 41 37 36;
    --border-primary: 214 211 209;
    --border-secondary: 68 64 60;
    --border-tertiary: 231 229 228;
    --text-primary: 28 25 23;
    --text-secondary: 87 83 78;
    --text-tertiary: 168 162 158;
    --text-inverted: 245 245 244;
    --accent: 47 54 51;
    --accent-alt: 250 204 21;
    --accent-inverse: 221 236 230;
    --info: 37 99 235;
    --info-alt: 29 78 216;
    --info-lite: 191 219 254;
    --info-whiteish: 221 228 247;
    --warn: 202 138 4;
    --warn-alt: 161 98 7;
    --warn-lite: 254 240 138;
    --warn-whiteish: 244 233 213;
    --danger: 220 38 38;
    --danger-alt: 185 28 28;
    --danger-lite: 254 202 202;
    --danger-whiteish: 247 220 219;
    --success: 22 163 74;
    --success-alt: 21 128 61;
    --success-lite: 187 247 208;
    --success-whiteish: 220 237 223;
    --disabled:71 85 105

  }

  a, a:link, a:visited {
    color: rgb(var(--text-primary));
  }

  a:hover, a:active {
    color: rgb(var(--text-secondary));
  }

  .boldbar::-webkit-scrollbar {
    height: 8px;
    width:8px
  }

  .boldbar::-webkit-scrollbar-track {
    background: rgb(var(--accent-inverse));
    border-radius: 0;
    box-shadow:inset -1px 1px 2px #0000004d
  }

  .boldbar::-webkit-scrollbar-thumb {
    background:rgb(var(--accent-alt))
  }

  .boldbar::-webkit-scrollbar-thumb:hover {
    background:rgb(var(--accent-alt)/.9)
  }

  .turbo-progress-bar {
    visibility: hidden;
  }

  #loading-indicator {
    display: none;
  }

  [aria-busy] #loading-indicator {
    display: flex;
  }

  .lds-heart {
    display: inline-block;
    position: relative;
    width: 128px;
    height: 128px;
    transform: rotate(45deg);
    transform-origin: 45px 125px;
  }
  .lds-heart div {
    top: 52px;
    left: 0;
    position: absolute;
    width: 52px;
    height: 52px;
    background: #FFF;
    animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .lds-heart div:after,
  .lds-heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 52px;
    height: 52px;
    background: #FFF;
  }
  .lds-heart div:before {
    left: -34px;
    border-radius: 50% 0 0 50%;
  }
  .lds-heart div:after {
    top: -34px;
    border-radius: 50% 50% 0 0;
  }
  @keyframes lds-heart {
    0% {
      transform: scale(0.95);
    }
    5% {
      transform: scale(1.1);
    }
    39% {
      transform: scale(0.85);
    }
    45% {
      transform: scale(1);
    }
    60% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(0.9);
    }
  }

  form button {
    .show-when-enabled {
      display: block;
    }

    .show-when-disabled {
      display: none
    }
  }

  form button[disabled] {
    .show-when-enabled {
      display: none;
    }

    .show-when-disabled {
      display: block;
    }
  }



}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */