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


@layer components {
  .bg-logo-yellow {
    background: #FBF48C;
    border-color: #F3C146;
  }

  .border-primary {
    @apply border rounded-md border-slate-200;
  }

  a {
    @apply text-yellow-800 hover:text-yellow-600 hover:underline;
  }
  .btn {
    @apply font-bold text-black hover:text-inherit hover:no-underline py-1.5 px-4 rounded my-1 inline-block text-center border hover:cursor-pointer;
  }

  .btn-sm {
    @apply py-1 px-2;
  }

  .btn-primary {
    @apply bg-gradient-to-b from-sky-500 to-sky-400 hover:from-sky-700 hover:to-sky-500 border-sky-800 text-white hover:text-white;
  }

  .btn-secondary {
    /* @apply border-stone-400 bg-stone-200 hover:bg-stone-300; */
    @apply bg-gradient-to-b border-slate-300 from-slate-50 to-slate-100 hover:from-slate-100 hover:to-slate-50;
  }

  .btn-danger {
    @apply bg-red-500 text-white hover:text-white;
  }
  .btn-danger:hover {
    @apply bg-red-800;
  }

  .map-container {
    @apply w-full py-2 border-primary h-42vh lg:h-550;
  }

  .panel {
    @apply rounded-md bg-slate-50 border-primary p-2 md:p-3;
  }
  .panel-secondary {
    @apply bg-slate-100;
  }

  .alert {
    @apply rounded border p-2 mb-2;
  }
  .alert h2 { @apply text-lg font-bold; }

  .alert-danger {
    @apply border-red-600 bg-red-300;
  }

  .field {
    @apply my-3;
  }

  input[type='datetime-local'], input[type='date'], input[type='text'], input[type='email'],
  input[type='password'], textarea {
    @apply border-primary focus:border-sky-500 p-1.5 ring-sky-300 focus:ring-sky-500 bg-white;
  }

  select {
    @apply border-primary focus:border-sky-500 py-1.5 pl-1.5;
  }

  textarea {
    height: 7em;
  }

  /* h2 {
    @apply underline;
  } */

  img.logo-biggest {
    height: 75px;
  }
  img.logo-bigger {
    height: 60px;
  }
  img.logo-smaller {
    height: 40px;
  }

  .logo path {
    fill: #FFEDD5;
  }
  .logo svg {
    position:relative;
    top: -3px;
    display: inline;
    width: 30px;
    height: 30px;
  }

  div.mapboxgl-popup-content {
    opacity: 0.9;
    border: 5px solid #888;
    text-align: center;
  }

  .hike-table-container {
  }

  .h-550 { height: 550px; }
  .h-42vh { height: 42vh; }
  .max-h-460 { max-height: 460px; }
  .max-h-42vh { max-height: 42vh; }

  #hike-list {
    @apply max-h-42vh lg:max-h-460;
    overflow-y: scroll;
  }
  #hike-list li {
    @apply border border-slate-50 text-sm;
    height: auto;
    border: 1px solid rgb(0 0 0 / 0);
  }

  #hike-list li:hover {
    @apply bg-slate-50 hover:bg-slate-200;
  }
  #hike-list li:nth-child(even) {
    @apply bg-slate-100;
  }
  #hike-list .selected {
    @apply border border-slate-400 bg-slate-200;
  }

  #hike-list .hike-details {
    @apply grid grid-cols-12 mt-3;
    margin-right: 1.25rem;
    overflow: hidden;
    transition: height 0.25s ease-in-out, opacity 0.25s ease-out;
  }

  #hike-list .key {
    @apply col-span-7;
  }
  #hike-list .value {
    @apply col-span-5 text-right;
  }
  #hike-list .notes, #hike-list .actions {
    @apply col-span-12;
  }

  #hike-list .notes-title {
    @apply border-b border-slate-300 mt-3 col-span-12;
  }
  #hike-list .actions {
    @apply border-t border-slate-300;
  }

  #hike-list .close-detail {
    @apply invisible text-slate-400 hover:text-slate-500;
    width: 1.25rem;
    margin-right: -0.25rem;
  }
  #hike-list .selected .close-detail {
    @apply visible;
  }

  .h-modal {
    height: 300px;
  }

  .modal {
    @apply hidden overflow-y-auto overflow-x-hidden z-50 fixed inset-0 p-2 bg-blend-darken;
    background: rgb(0 0 0 / 0.7);
    transition: opacity 0.25s ease-out;
  }

  .modal-content {
    @apply panel border-slate-400 my-10 mx-auto;
    max-width: 500px;
  }
}
/* line 1, app/assets/stylesheets/breadcrumbs.scss */
ol.breadcrumbs {
  margin-top: 0;
  display: inline-block;
  list-style: none;
  padding-inline-start: 0;
  font-weight: bold;
}

/* line 7, app/assets/stylesheets/breadcrumbs.scss */
ol.breadcrumbs li {
  color: #777;
  padding-right: 5px;
  display: inline-block;
}

/* line 11, app/assets/stylesheets/breadcrumbs.scss */
ol.breadcrumbs li:not(:first-child)::before {
  color: #aaa;
  content: "/";
  padding-right: 5px;
}

/* line 17, app/assets/stylesheets/breadcrumbs.scss */
ol.breadcrumbs a {
  text-decoration: none;
}

/* line 20, app/assets/stylesheets/breadcrumbs.scss */
ol.breadcrumbs a:hover {
  text-decoration: underline;
}
/*
 * 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.
 *


 */