globals.css

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

@font-face {
  font-family: "Inter";
  font-display: fallback;
  src: url("../public/assets/fonts/Inter-VariableFont_slnt,wght.ttf");
}

body {
  @apply font-normal;
  background-color: #f8f9fa;
  @apply text-light-slate-12;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply tracking-tight;
}
button:not([role]) {
  @apply border;
  @apply border-transparent;
}

input[type="checkbox"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="combobox"]:focus-visible,
[role="switch"]:focus-visible,
button:not([role]):focus-visible {
  @apply outline-none;
  @apply ring;
  @apply border-orange-500;
  @apply ring-orange-100;
}

/* collapsible component animation */
.animate-collapse[data-state="open"] {
  animation: slideDown 150ms ease-out;
}
.animate-collapse[data-state="closed"] {
  animation: slideUp 150ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

/* See https://github.com/open-sauced/app/issues/2210 */
[role="checkbox"] > [data-state="checked"] > svg {
  stroke-width: 5;
}

.auto-grow-input:not(:empty) {
  color: black;
}
.auto-grow-input[contenteditable]:empty::before {
  content: "List Name";
  color: "#d1d5db" !important;
}

.login-step .sbui-btn-container {
  width: 100%;
}

.border-conic-gradient {
  background-image: conic-gradient(
    from 180deg at 50% 50%,
    #ff6a06 0deg,
    #ff6492 120.00000357627869deg,
    #ffe22c 223.12500715255737deg,
    #fc620d 360deg,
    #ff7e33 360deg
  );
}

.sbui-btn > span {
  display: flex;
  align-items: center;
}

.sbui-select:focus-visible {
  border: 1px solid #f76808 !important  ;
  box-shadow:
    0px 0px 0px 2px #ffcca7,
    0px 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.sbui-checkbox:hover {
  border-color: #f76808 !important;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

div[role="dialog"]::-webkit-scrollbar {
  width: 16px;
  height: 10px;
}
div[role="dialog"]::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  border-radius: 8px;
  background: #c2c9d2;
  background-clip: padding-box;
}
.swiper {
  padding-bottom: 25px !important;
}
:root {
  --swiper-theme-color: hsla(19, 100%, 50%, 1) !important;
  --swiper-pagination-bottom: -5px;
  --swiper-pagination-bullet-inactive-color: rgb(255, 159, 115);
  --swiper-pagination-bullet-size: 8px;
}

.newsletter-wrap {
  container: newsletterWrap / inline-size;
}

@container newsletterWrap (max-width: 240px) {
  .form-wrap {
    flex-wrap: wrap;
  }
  .form-wrap button {
    width: 100%;
  }
}

.loading {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1) 10%,
    rgba(0, 0, 0, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 40%
  );
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.05);
  background-size: 800px 104px;
  position: relative;
}

.radix-select-trigger span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.react-loading-skeleton {
  z-index: unset !important;
}

/* For the mail icon */
svg:has(> #Mail) {
  stroke-width: 1;
}

/* For the tracked repo wizard button focus states */
[data-tracked-repo-wizard] > button:focus-within > svg {
  @apply text-green-600;
}
[data-tracked-repo-wizard] > button:focus-within > [data-button-title] {
  @apply text-green-800;
}

.workspace-drop-down > [role="combobox"] {
  max-width: 14rem;
}

/* TODO: Sort out configuring ShadCN as we've only ever brought in components from it,
but never configured it. */
.bg-muted {
  @apply bg-slate-200;
}