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

.mapboxgl-popup,
.maplibregl-popup {
  @apply max-w-[400px] min-w-[250px];
}

.mapboxgl-popup-content,
.maplibregl-popup-content {
  @apply bg-grey-light shadow-lg rounded-md max-h-[500px] overflow-y-auto;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  @apply border-t-grey-light;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  @apply border-b-grey-light;
}

.ant-popover-inner {
  @apply bg-white-background rounded-xl max-h-[calc(100vh-100px)] overflow-y-auto;
}

.ant-modal-header {
  border-bottom: none;
}

.ant-select-multiple .ant-select-selection-item {
  @apply !bg-rose;
}

.mapboxgl-ctrl-group,
.maplibregl-ctrl-group {
  @apply bg-white-background;
}

.mapboxgl-ctrl-group button,
.maplibregl-ctrl-group button {
  @apply w-fit;
}

.maplibregl-export-control {
  @apply !w-[30px] !h-[30px];
  background: url('data:image/svg+xml;charset=UTF-8,<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m422.5 99v-24c0-41.355-33.645-75-75-75h-184c-41.355 0-75 33.645-75 75v24z"/><path d="m118.5 319v122 26 15c0 16.568 13.431 30 30 30h214c16.569 0 30-13.432 30-30v-15-26-122zm177 128h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15zm0-64h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15z"/><path d="m436.5 129h-361c-41.355 0-75 33.645-75 75v120c0 41.355 33.645 75 75 75h13v-80h-9c-8.284 0-15-6.716-15-15s6.716-15 15-15h24 304 24c8.284 0 15 6.716 15 15s-6.716 15-15 15h-9v80h14c41.355 0 75-33.645 75-75v-120c0-41.355-33.645-75-75-75zm-309 94h-48c-8.284 0-15-6.716-15-15s6.716-15 15-15h48c8.284 0 15 6.716 15 15s-6.716 15-15 15z"/></g></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
}

.mapboxgl-ctrl-top-left .mapboxgl-ctrl,
.maplibregl-ctrl-top-left .maplibregl-ctrl {
  margin: 20px 0 0 20px;
}

.maplibregl-export-list {
  padding: 8px;
}

.ant-select-item-option-content {
  overflow: initial;
  white-space: initial;
  text-overflow: initial;
}

.generate-button {
  color: #fff;
  border-color: #cc2222ff !important;
  background: #cc2222ff !important;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 8px;
  margin: 8px auto 0;
  font-size: 14px;
  border-radius: 5px;
  width: 100% !important;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #e2e2e3;
}

/* Works on Firefox*/
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}