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

/*

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

*/
.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-option label {
  cursor: pointer;
}

.color-option input[type="radio"] {
  display: none;
}

.color-option input[type="radio"]:checked + label {
  border: 3px solid var(--banners-black);
}

.banners-team-baby-blue {
  background-color: var(--banners-team-baby-blue);
}

.banners-team-charcoal {
  background-color: var(--banners-team-charcoal);
}

.banners-team-gray {
  background-color: var(--banners-team-gray);
}

.banners-team-light-gray {
  background-color: var(--banners-team-light-gray);
}

.banners-team-neon-green {
  background-color: var(--banners-team-neon-green);
}

.banners-team-orange {
  background-color: var(--banners-team-orange);
}

.banners-team-purple {
  background-color: var(--banners-team-purple);
}

.banners-team-red {
  background-color: var(--banners-team-red);
}

.banners-team-royal-blue {
  background-color: var(--banners-team-royal-blue);
}

.banners-team-yellow {
  background-color: var(--banners-team-yellow);
}
.icon__star {
  width: 18px;  
  aspect-ratio: 1;
  background: var(--banners-team-gray);
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
   ); 
}

.icon__star--filled {
  background: var(--banners-team-yellow);
}
.insight-component {
  background-image: url(https://staging.raisebanners.com/assets/insight-background.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 50px 70px 0 #15A9C50F;
  max-width: 818px;
  padding-left: 28%;
}

.insight-component__title {
  color: var(--banners-blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}

.insight-component__body {
  color: #303030;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.insight-component__note {
  font-size: 10px;
  font-weight: 700;
  line-height: 15px
}
/*
 * 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.
 *


 */
 :root {
  --banners-blue: #2544E0;
  --banners-black: #303030;
  --banners-team-baby-blue: #6BDCF4;
  --banners-team-charcoal: #444444;
  --banners-team-gray: #7F7F7F;
  --banners-team-light-gray: #ebebeb;
  --banners-team-neon-green: #9ee467;
  --banners-team-orange: #FF9040;
  --banners-team-purple: #B86BF4;
  --banners-team-red: #f15858;
  --banners-team-royal-blue: #3873E4;
  --banners-team-yellow: #EADB5A;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
 }

 .location-dropdown {
  max-height: 240px;
 }

 .no-scroll {
  height: 100%;
  overflow: hidden;
 }

 .bg-banners-blue {
  background-color: var(--banners-blue);
 }

 .text-banners-blue {
  color: var(--banners-blue);
 }

.tab-content {
  padding-top: 20px;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

.text-wrap {
  text-wrap: auto;
}

.mr-60 {
  margin-right: 15rem;
}

.right-drawer {
  width: 20rem;
}

.page-container__right-drawer {
  margin-right: 20rem;
}

.flash {
  position: fixed;
  top: 61px;
  width: 100%;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.max-h-700 {
  max-height: 700px;
}

turbo-frame .loading-element { display: none; }
turbo-frame[busy] .loading-element { display: block; }

@media(min-width: 1024px) {
  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    translate: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .page-container__side-nav {
      padding-left: 16rem;
  }
}

/* Dragula styles */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  border-bottom: 0;
  list-style: none;
  pointer-events: none;
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

/* Optional: Add custom styling for draggable items */
.draggable {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.draggable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}