@import '../../../vendor/assets/stylesheets/glide/glide.core.css';
@import '../../../vendor/assets/stylesheets/glide/glide.theme.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
    .gp-btn{
        @apply rounded bg-indigo-600 px-2 py-2 text-xs font-semibold  text-center text-white shadow-md hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }

    .mini-cart {
        grid-template-rows: 2em;
        grid-template-columns: 2.5em auto 3.5em;
    }



}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


 */



.trix-content{
    h1{
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }
    ul{
        list-style-type: disc;
        margin-left: 1.5rem;
        margin-bottom: 1rem;
    }

    a{
        text-decoration: underline;
    }
}

/*suppresses mapbox js warning: https://github.com/mapbox/mapbox-gl-js/issues/9869 */
.mapboxgl-canary {
    background-color: salmon;
}

.blog-body .trix-content img {
    max-height: 25vh !important; /* Constrains Trix images while editing */
    width: auto;
    object-fit: contain;
}