/* @import tags must come before @tailwind */
@import "actiontext.css";
@import "goal/objective.css";
@import "goal/check_in.css";
@import "goal/shared.css";
@import "marketing/home.css";
@import "marketing/pricing.css";
@import "shared/datepicker.min.css";

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

@layer base {
  @font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/InterVariable-5db5a521938db7aaba812b5ef28f057725d3622a1e81c0a6ecd3ca6efd0a04ad.woff2) format("woff2");
    /* or format("woff2-variations") if you prefer */
  }

  @font-face {
    font-family: 'InterVariable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/InterVariable-Italic-635017f7110876734b249b2917840fc9ca2e4af3b066d5b326d4aaf071c05eaf.woff2) format("woff2");
  }
}

@layer components {
  /* Buttons */
  .btn-primary-base {
    @apply bg-gradient-to-b from-primary-500 to-primary hover:from-primary-400 hover:to-primary-500 text-white py-1.5 border-primary font-medium border select-none;
  }
  .btn-primary {
    @apply btn-primary-base rounded-xl px-3 py-1.5 border;
  }
  .btn-primary-base:disabled,
  .btn-primary-base[data-disabled="true"],
  .btn-primary:disabled,
  .btn-primary[data-disabled="true"] {
    @apply opacity-80 cursor-not-allowed hover:from-primary-500 hover:to-primary;
  }
  .btn-secondary {
    @apply bg-white px-6 rounded-3xl border-strong border py-2 mr-2 hover:bg-hover select-none;
  }
  .btn-new-team {
    @apply bg-gradient-to-b flex from-secondary-400 to-secondary hover:from-secondary hover:to-secondary-600 border border-secondary-500 items-center text-white py-2 pr-7 pl-5 rounded-md font-medium select-none;
  }
  .btn-save {
    @apply text-white px-6 py-2 rounded-3xl font-medium bg-green-700 hover:bg-green-600 select-none;
  }
}

@layer base {
  /* Headers */
  h1 {
    @apply text-3xl font-semibold;
  }
  h2 {
    @apply text-2xl font-semibold;
  }
  h3 {
    @apply text-xl font-semibold;
  }

  /* Scroll bar in left menu */
  .custom-scrollbar {
    &::-webkit-scrollbar {
      @apply w-2;
    }
    &::-webkit-scrollbar-thumb {
      @apply bg-zinc-300 rounded-md;
    }
    &::-webkit-scrollbar-thumb:hover {
      @apply bg-zinc-400;
    }
    &::-webkit-scrollbar-track {
      @apply bg-zinc-100;
    }
  }
  
  /* Form elements */
  [type="number"],
  [type="text"],
  [type="password"],
  [type="email"]
  {
    @apply rounded border-gray-400;
    &:focus {
      @apply border-primary/80 ring-primary/80;
    }
    &:disabled,
    &:read-only {
      @apply bg-gray-100 text-gray-500 focus:ring-0 focus:border-gray-400 cursor-not-allowed;
    }
  }
  [type="submit"],
  a {
    @apply outline-primary/80;
    &:disabled {
      @apply bg-gray-200 hover:bg-gray-200 cursor-not-allowed;
    }
  }
  textarea {
    @apply resize-none rounded;
    &:focus {
      @apply ring-2 ring-primary bg-white;
    }
  }
  /* Hide spinners (increment and decrement arrows in number field) in WebKit browsers (Chrome, Safari, Edge, Opera) */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* Hide spinners in Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }

  /* Misc */
  .current-page {
    @apply bg-hover font-semibold rounded-sm relative;
  }
  .number-rounded {
    @apply h-6 min-w-6 flex items-center justify-center rounded-full text-white;
    &[data-disabled="true"] {
      @apply bg-gray-200;
    }
  }
  .tooltip {
    @apply bg-black absolute rounded-md shadow text-white text-xs px-2 py-1 z-20 whitespace-nowrap cursor-default;
  }

  /* Turbo frames */
  @keyframes growAndShrink {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes greenfade {
    from {
      background: rgba(134, 239, 172, 0.4); /* based on green-300 */
    }
    to {
      background: transparent;
    }
  }
  .turbo-positive-highlight {
    @apply text-green-700;
    animation: greenfade 1.5s, growAndShrink 0.4s ease-in-out;
  }

  @keyframes redfade {
    from {
      background: rgba(252, 165, 165, 0.4); /* based on red-300 */
    }
    to {
      background: transparent;
    }
  }
  .turbo-negative-highlight {
    @apply text-red-700;
    animation: redfade 1.5s, growAndShrink 0.4s ease-in-out;
  }

  @keyframes greyfade {
    from {
      background: rgba(209, 213, 219, 0.4); /* based on gray-300 */
    }
    to {
      background: transparent;
    }
  }
  .turbo-neutral-highlight {
    @apply text-inherit;
    animation: greyfade 1.5s, growAndShrink 0.4s ease-in-out;
  }

  /* Key result */
  .active {
    @apply bg-primary/10 ring-2 ring-primary;
  }

  /* Dropdown */
  .dropdown-item {
    @apply py-2 px-3 block hover:bg-gray-100 cursor-pointer whitespace-nowrap text-sm;
  }
  .dropdown-item-active {
    @apply bg-gray-100 font-semibold;
  }

  /* Users */
  .user-profile {
    @apply text-white min-h-8 min-w-8 rounded-full text-sm font-medium flex items-center justify-center border cursor-pointer hover:opacity-90;
  }

  /* Flash */
  .static-flash {
    @apply py-2 px-3 mb-5 font-medium rounded-lg inline-block;
  }
}

/* Turbo progress bar */
.turbo-progress-bar {
  @apply bg-primary;
}