/* TODO: this should probably be duplicated into a v2/v1 file and loaded dynamically */

:root {
  /* Common properties */
  --font-xs: 0.7rem;
  --font-sm: 0.8rem;
  --font-size: 1rem;
  --font-lg: 1.2rem;
  --font-xl: 1.5rem;
  --round-sm: 0.25rem;
  --round: 0.5rem;
  --round-lg: 1rem;
  --disabled-opacity: 0.5;
}

* {
  box-sizing: border-box;
  touch-action: manipulation;
}

html,
body,
.root {
  width: 100%;
  height: 100%;
  /* Prevent scrollbars during page transitions */
  overflow: hidden;
}


body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  padding-bottom: env(safe-area-inset-bottom, 10px);
}

label.v2,
.label.v2 {
  font-size: var(--fs-13);
  /* font-weight: bold; */
  color: var(--color-blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input[type=text].v2,
input[type=email].v2,
input[type=password].v2 {
  width: 100%;
  background-color: var(--color-white);
  color: var(--color-gray-dark);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--round-4);
  padding: 0.25rem 12px;
  font-size: var(--fs-15);
  font-family: "Montserrat", "Roboto", sans serif;
  cursor: text;
}

input[type=text].v2:focus,
input[type=email].v2:focus,
input[type=password].v2:focus {
  border: 1px solid var(--color-accent);
  outline: none;
}

input[type=text].v2::placeholder,
input[type=email].v2::placeholder,
input[type=password].v2::placeholder {
  font-style: italic;
  color: var(--color-border-gray);
}

textarea.v2 {
  resize: none;
  background-color: var(--color-white);
  color: var(--color-gray-dark);
  font-size: var(--fs-15);
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  font-family: "Montserrat", "Roboto", sans-serif;
  border: 1px solid var(--color-border-gray);
  border-radius: var(--round-4);
  cursor: text;
}

textarea.v2:focus {
  border: 1px solid var(--color-accent);
  outline: none;
}

textarea.v2::placeholder {
  font-style: italic;
  color: var(--color-border-gray);
}

select.v2 {
  width: 100%;
  background-color: var(--color-white);
  color: var(--color-gray-dark);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--round-4);
  padding: 0.25rem 12px;
  font-size: var(--fs-15);
  font-family: "Montserrat", "Roboto", sans-serif;
  cursor: pointer;
}

a,
.link {
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}

svg {
  width: 100%;
  height: 100%;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-white);
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  border-radius: var(--round-4);
  font-size: var(--fs-12);
  text-align: center;
  padding: 0.4rem 1rem;
  text-transform: uppercase;
  cursor: pointer;
}

.button .icon {
  width: 1rem;
  height: 1rem;
}

.button.blue {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.button.blue.hollow {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background-color: transparent;
}

.button.blue-light {
  background-color: var(--color-tag-blue);
  border-color: var(--color-tag-blue);
}

.button.green {
  background-color: var(--color-green);
  border-color: var(--color-green);
}

.button.green.hollow {
  border-color: var(--color-green);
  color: var(--color-green);
  background-color: transparent;
}

.button.red {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.button.red.hollow {
  border-color: var(--color-red);
  color: var(--color-red);
  background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {

  .button:hover,
  .button.blue:hover {
    background-color: var(--color-white);
    color: var(--color-blue);
  }

  .button.blue-light:hover {
    background-color: var(--color-hover-white);
    color: var(--color-tag-blue);
  }

  .button.green:hover {
    background-color: var(--color-white);
    color: var(--color-green);
  }

  .button.red:hover {
    background-color: var(--color-white);
    color: var(--color-red);
  }
}

.capitalize {
  text-transform: capitalize;
}

.thin {
  font-weight: 300;
}

.bold {
  font-weight: 600;
}

.underline {
  text-decoration: underline;
}

.pointer {
  cursor: pointer;
}


/* ----- Dialogs ----- */
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 30rem;
  max-width: 90vw;
  max-height: 90vh;
  background-color: var(--color-dialog-bg);
  z-index: 100;
}

.dialog>.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.dialog>.header>.title {
  flex-grow: 1;
}

.dialog>.header>.icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
}

.btn-close {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  stroke-width: 2;
}

@media (hover: hover) and (pointer: fine) {
  .btn-close:hover {
    background-color: var(--color-red);
  }
}

/* ----- Tags ----- */
.tag-container {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  padding: 0.25rem 1rem;
  font-size: var(--fs-9);
  background-color: var(--color-tag-gray);
  color: var(--color-black);
  border: 1px solid var(--color-tag-gray);
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--round-4);
}

.tag.red {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.tag.green {
  background-color: var(--color-green);
  border-color: var(--color-green);
}

.tag.blue {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.tag.blue.hollow {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background-color: var(--color-white);
}

/* ----- Cards ----- */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  border: solid 1px var(--color-border-gray);
  border-radius: var(--round-4);
  background-color: var(--color-card-bg);
}

.card>.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card>.header>.title {
  font-weight: bold;
  font-size: var(--font-md);
  color: var(--color-primary);
}

.card>.content {
  height: 100%;
  padding: 0.5rem;
  font-size: var(--font-sm);
  background-color: var(--color-white);
  border-radius: var(--round-4);
}


.apex-thumbnail>path[data-area-id]:hover {
  fill: rgba(119, 136, 153, 0.5);
}

/* ----- Hover Effect ----- */
/* @media (hover: hover) and (pointer: fine) {
  .hover:hover {
    background-color: var(--hover-color);
  }
} */

/* ----- Animations ----- */

.rotate {
  animation: rotation 2s infinite linear;
}

.rotate-slow {
  animation: rotation 5s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.selection-fade {
  animation: selectionFade 2s ease-out;
}

@keyframes selectionFade {
  0% {
    fill: rgba(119, 136, 153, 0);
  }

  50% {
    fill: rgba(119, 136, 153, 0.5);
  }

  100% {
    fill: rgba(119, 136, 153, 0);
  }
}

/* ----- Transitions ----- */
.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: transform 0.25s ease;
}

.menu-slide-enter-from,
.menu-slide-leave-to {
  transform: scaleY(0);
}


.slide-from-left {
  transition: transform 0.25s ease-in-out;
}

.slide-from-left-enter-from {
  transform: translateX(-20px) scaleX(0);
}

.slide-from-left-enter-to {
  transform: translateX(0) scaleX(1);
}

.slide-from-left-leave-from {
  transform: translateX(0) scaleX(1);
}

.slide-from-left-leave-to {
  transform: translateX(-20px) scaleX(0);
}

/*
.slide-from-left-enter-active,
.slide-from-left-leave-active {
  transition: transform 0.25s ease;
}
.slide-from-left-enter-from,
.slide-from-left-leave-to {
  transform: scaleX(0);
}

.slide-from-left * {
  transform-origin: left;
}
  */