@use 'colors';
@use 'icons';
@use 'markers';
@use 'dark';

:root {
  --background-color: white;
  --box-shadow-color: #546e7a;

  --exponential-ease-out: cubic-bezier(.2, 1, .2, 1);
}

/*---------- Content ------------*/
html, body {
  height: 100%;
}

body {
  &[data-editor-id="false"] .link-editor-id,
  &[data-editor-rapid="false"] .link-editor-rapid,
  &[data-editor-josm="false"] .link-editor-josm,
  &[data-editor-level0="false"] .link-editor-level0,

  &[data-tool-openstreetmap="false"] .link-osm,
  &[data-tool-mapillary="false"] .link-tool-mapillary,
  &[data-tool-deepl="false"] .link-tool-deepl,

  &[data-authenticated="true"] .requires-no-authentication,
  &[data-authenticated="false"] .requires-authentication,

  &[data-query-changed="true"] .requires-same-query,
  &[data-query-changed="false"] .requires-changed-query,

  [data-status="open"] .comment-action[data-action="reopen"],
  [data-status="closed"] .comment-action[data-action="comment"],
  [data-status="closed"] .comment-action[data-action="close"],

  #note-container .comments-modal-trigger {
    display: none;
  }
}

header.navbar {
  position: fixed;
  width: 100%;
  background-color: var(--background-color);
  box-shadow: 0 10px 10px -10px var(--box-shadow-color);
  z-index: 2;
}

main {
  position: absolute;
  height: calc(100% - 44px);
  bottom: 0;
  width: 100%;
}

.modal-container {
  max-width: 850px;
  max-height: 80vh;
}

.sidebar {
  position: absolute;
  top: 0;
  padding: 12px 12px 0px;
  max-height: 100%;
  background-color: var(--background-color);
  overflow-y: auto;
  transition: transform 250ms var(--exponential-ease-out);
  box-shadow: 10px 10px 10px -10px var(--box-shadow-color);
}

#note-container {
  .note-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-top: 20%;
    padding-bottom: 12px;
    background-image: linear-gradient(to bottom, transparent, var(--background-color) 50%);
  }
}

.note-badges {
  font-size: 90%;
}

.note-actions {
  display: flex;
  flex-wrap: wrap;
  > * {
    flex: 1;
    margin: 2px;
  }
}

#bottom-container {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

#modal-area-selector-content {
  height: 50vh;
}

/*---------- Leaflet ------------*/
#map, #map-container {
  height: 100%;
  z-index: 0;
}

.leaflet-control-attribution {
  font-size: 12px;
  a {
    color: #302ecd;
  }
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: none;
}

.leaflet-popup-content-wrapper {
  padding: 0;
  .leaflet-popup-content {
    margin: 0;
    .card {
      border: 0;
    }
  }
}

/*---------- Spectre overrides ------------*/
.badge.badge-small[data-badge]::after {
  font-size: .5rem;
  height: .5rem;
  line-height: .5;
  min-width: .5rem;
}

.badge:not([data-badge]), .badge[data-badge] {
  &.badge-small::after {
    box-shadow: 0 0 0 .075rem #fff;
  }
}


/*---------- Other utility classes ------------*/
body.deprecated-browser #deprecation-warning {
  display: block !important;
}

.img-preview {
  display: inline-block;
  max-height: 200px;
  max-width: 50%;
}

.c-default {
  cursor: default;
}

.m-auto {
  margin: auto;
}

.flex-grow {
  flex-grow: 1;
}

.text-center {
  text-align: center;
}

input:disabled ~ span {
  cursor: not-allowed;
  opacity: .5;
}

textarea {
  resize: vertical;
}

.tooltip::after {
  max-width: none;
}

.faq-color {
  border-radius: .1rem;
  margin: .25rem 0;
  padding: 3rem .5rem .5rem;
  min-height: 140px;
}

.marker-icon {
  svg {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
    transition: transform 500ms var(--exponential-ease-out);
    transform-origin: bottom;
  }
  &:focus svg {
    transform: scale(1.2);
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 500;
}

.out-of-view {
  transform: translateX(-100%);
}

/*---------- Liberapay ----------*/
.liberapay-logo {
  display: inline-block;
  background-color: #f6c915;
  border-radius: 4px;
  padding: 0px 5px;
  b {
    color: black;
    text-decoration: none;
    vertical-align: text-bottom;
  }
}

/*---------- Mapillary ----------*/
.mapillary-image {
  max-width: 320px;
  max-height: 240px;

  .mapillary-image-link {
    top: 6px;
    left: 0px;
  }

  .mapillary-image-user {
    bottom: 0px;
    right: 0px;
    font-size: 0.5rem;
  }
}

/*---------- Toasts ------------*/
#toast-container {
  position: fixed;
  top: 5%;
  right: 5%;
  z-index: 500;
  > .toast {
    margin-top: 10px;
    cursor: default;
  }
}

/*---------- Labels ------------*/
.label-green-dark {
  background: var(--green-dark-primary);
  color: #fff;
}
.label-green {
  background: var(--green-primary);
  color: #fff;
}
.label-lime {
  background: var(--lime-primary);
  color: #fff;
}
.label-amber {
  background: var(--amber-primary);
  color: #fff;
}
.label-orange {
  background: var(--orange-primary);
  color: #fff;
}
.label-red {
  background: var(--red-primary);
  color: #fff;
}
