@tailwind base;

:root {
  --primary: #080f21;
  --secondary: #b3d0ff;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) var(--primary);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: 25px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 14px;
  border: 3px solid var(--primary);
}

@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply bg-cc-black-dark text-cc-gray-light;
  }

  h1 {
    @apply font-special text-4xl font-bold text-cc-blue-text;
  }
  h2 {
    @apply font-special text-3xl font-bold text-cc-blue-text;
  }
  h3 {
    @apply font-special text-2xl font-bold text-cc-blue-text;
  }
  h4 {
    @apply font-special text-xl font-bold text-cc-blue-text;
  }
  h5 {
    @apply font-special text-xl font-semibold text-cc-blue-text;
  }
  label {
    @apply text-cc-gray-light ml-1.5;
  }

  select {
    @apply bg-cc-black-dark text-cc-gray-light py-1 px-4 rounded-lg transition-colors duration-150 appearance-none;
    &:focus {
      @apply ring-cc-blue-light;
    }
  }
}

@layer utilities {
  .white-dropdown-arrow {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#B3D0FF"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    appearance: none;
  }

  /* Trix buttons */
  .trix-button-group button {
    @apply bg-cc-blue-text-lighter rounded-md;
  }

  trix-toolbar .trix-button-group {
    @apply border-none space-x-0.5;
  }

  /* Combobox utilities */
  .hw-white-handles + .hw-combobox__handle::before {
    --hw-handle-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#B3D0FF"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
    --hw-handle-image--queried: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#B3D0FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
    --hw-handle-width: 1rem;
    --hw-handle-width--queried: 1rem;
    background-position: calc(50% + 2px) 50%;
  }

  .potential-conflict {
    @apply opacity-95 bg-gradient-to-l from-cc-red-medium-light via-cc-red-light to-cc-red-medium-light;
  }

  .conflict {
    @apply opacity-95 bg-gradient-to-l from-cc-red-medium-light via-cc-red-light to-cc-red-medium-light;
  }
  .invalid-dropzone {
    @apply opacity-50;
    scale: 0.99;
  }
  .sc-placeholder {
    @apply opacity-30 shadow-[inset_0px_0px_10px_rgba(0,0,0,2)];
  }
  .beveled-card {
    @apply relative rounded-md;
  }

  .beveled-card::before {
    content: "";
    @apply absolute inset-0 opacity-80 rounded-md;
    z-index: -1;
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.2),
      inset 1px 1px 2px rgba(255, 255, 255, 0.5),
      inset 1px 1px 2px rgba(59, 130, 246, 0.25);
  }
  .focus-ts {
    @apply shadow-[0_25px_50px_-12px_rgba(59,130,246,0.25)] scale-105 rounded-md ring-opacity-20 ring-inset ring-1 ring-cc-blue-text-lighter;
  }

  .tbd-highlight {
    @apply opacity-85 rounded-b-md bg-gradient-to-l from-teal-600 via-teal-500 to-teal-600;
  }

  /* Note indicator for scheduled courses with notes */
  .note-indicator {
    @apply absolute -bottom-1 -right-0.5 w-5 h-6 border-[1.5px] border-cc-gold rounded-md backdrop-filter backdrop-blur-sm z-0 ring-1 ring-cc-gold;
  }
}

@layer components {
  #time-table-sidebar.collapsed {
    @apply w-16;
  }

  /* Flip the arrow direction when collapsed */
  #time-table-sidebar.collapsed .sidebar-collapse-toggle svg {
    @apply -scale-x-100;
  }

  .collapsed .sidebar-collapsible {
    @apply hidden;
  }

  .collapsed .sidebar-icon {
    @apply scale-125 my-1 mx-auto;
  }

  .collapsed .sidebar-view-container {
    @apply pl-0;
  }

  .btn-primary {
    @apply font-special py-2 px-4 bg-cc-blue-medium transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-blue-light shadow-inner ring-2 ring-cc-blue-light scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &:hover {
      @apply bg-cc-blue-medium-light ring-2 ring-cc-blue-light outline-none;
    }
  }

  .btn-disabled {
    @apply font-special py-2 px-4 bg-cc-gray-medium text-cc-gray-light rounded-md font-semibold opacity-70 cursor-not-allowed;
  }

  .btn-medium {
    @apply font-special py-1 px-4 bg-cc-blue-medium transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-blue-light shadow-inner ring-2 ring-cc-blue-light scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &:hover {
      @apply bg-cc-blue-medium-light ring-2 ring-cc-blue-light outline-none;
    }
  }

  .btn-medium-green {
    @apply font-special py-1 px-4 bg-cc-green-dark transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-green-medium shadow-inner ring-2 ring-cc-green-medium scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &:hover {
      @apply bg-cc-green-medium ring-2 ring-cc-green-medium outline-none;
    }
  }

  .btn-medium-blue {
    @apply font-special py-1 px-2 bg-cc-blue-text-light text-cc-blue-medium transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-blue-text-lighter shadow-inner ring-2 ring-cc-blue-text-lighter scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &:hover {
      @apply bg-cc-blue-text-lighter ring-2 ring-cc-blue-light outline-none;
    }
  }

  .btn-medium-red {
    @apply font-special py-1 px-2 bg-cc-red-medium-light text-cc-blue-text-lighter transition-all duration-75 rounded-md font-semibold;
    &:active {
      @apply bg-cc-red-light shadow-inner ring-2 ring-cc-red-light scale-95;
    }
    &:hover {
      @apply cursor-pointer;
    }
    &:focus,
    &:hover {
      @apply bg-cc-red-light ring-2 ring-cc-red-light outline-none;
    }
  }

  .input-field {
    @apply bg-cc-black-dark text-cc-gray-light py-1 px-4 rounded-lg transition-colors duration-150 appearance-none;
    &:focus {
      @apply ring-cc-blue-light;
    }
    &:hover,
    &:focus,
    &:not(:placeholder-shown) {
      @apply bg-cc-blue-dark;
    }
  }
  .floating-label {
    @apply absolute bg-cc-black-dark duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] px-2 start-1
    peer-focus:px-2 peer-focus:rounded-xl peer-focus:bg-cc-blue-dark peer-focus:scale-75 peer-focus:-translate-y-5 peer-focus:top-2
    peer-hover:bg-cc-blue-dark
    peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-placeholder-shown:scale-100
    peer-[:not(:placeholder-shown)]:bg-cc-blue-dark
    rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto;
  }

  .static-floating-label {
    @apply absolute scale-75 -top-3 z-10 origin-[0] px-1 start-1;
    background: linear-gradient(
      to bottom,
      theme("colors.cc-black-dark") 50%,
      theme("colors.cc-blue-dark") 50%
    );
  }

  /* HW-COMBOBOX STYLING*/

  /* .hw-combobox__input {
    @apply bg-cc-black-dark text-cc-gray-light py-1 px-4 rounded-lg transition-colors duration-150 appearance-none outline-none;
  }
  .hw-combobox__input:focus {
    @apply ring-cc-blue-light;
  }
  .hw-combobox__handle {
    @apply white-dropdown-arrow;
  }
  .hw-combobox__handle::before {
    display: none;
  }
  .hw-combobox__main__wrapper:focus-within {
    @apply w-full;
  }
  .hw-combobox__main__wrapper:focus-within {
    @apply w-full;
  } */

  .avatar-backup {
    @apply relative h-full w-full overflow-hidden rounded-full bg-cc-black-darkest;
  }

  .avatar-backup::before {
    content: "";
    @apply absolute top-[2px] left-1/2 transform -translate-x-1/2 w-1/2 h-1/2 bg-gray-300 rounded-full;
  }

  .avatar-backup::after {
    content: "";
    @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 w-10/12 h-1/3 bg-gray-300 rounded-t-full;
  }
}