/* This is Free Software under GNU Affero General Public License v >= 3.0;
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 * Markus Kottländer <markus.kottlaender@intevation>
 */
@import "@/assets/tooltip.scss";

$shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
$border-radius: 0.25rem;
$icon-height: 2rem;
$icon-width: 2rem;
$large-offset: 2rem;
$offset: 1rem;
$sidebar-width: 21rem;
$slight-transparent: 0.96;
$small-offset: 0.5rem;
$smaller: 0.9rem;
$transition-fast: 0.3s;
$x-large-offset: 3rem;
$xx-large-offset: 5rem;
$color-info: #17a2b8;

::placeholder {
  color: #ccc !important;
  font-size: smaller;
  font-weight: bold;
}

a {
  color: $color-info;
}

a:hover,
a:active,
a:focus {
  color: darken($color-info, 13);
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}

.debug {
  border: 1px solid red;
}

%fully-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header {
  font-weight: bold;
  font-size: 0.9em;
}

.ui-element {
  pointer-events: auto;
}

.shadow-xs {
  box-shadow: $shadow-xs;
}

.box {
  opacity: $slight-transparent;
  max-height: 0;
  max-width: 0;
  overflow: hidden;
  margin: 0;
  box-shadow: $shadow-xs;
  transition: max-width 0.4s, max-height 0.4s, margin 0.4s;
}

.box h6,
.contextbox h6 {
  color: $color-info;
  font-weight: bold;
}

.expanded {
  max-height: 999px;
  max-width: 999px;
  margin: 0 0.5rem 1rem 0.5rem;
}

// needed to fix the whitespace problem of
//   https://github.com/Polyconseil/vue-gettext/issues/80;
// use like
//    <a href="..">link</a>
//    <span v-translate class="fix-trans-space">contributors.</span>
//
// done centrally, so we can fix it centrally for better vue-gettext version
.fix-trans-space,
.fix-trans-space:before {
  content: " ";
}

.closebutton {
  position: absolute;
  right: $offset;
}

.headline {
  font-weight: bold;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.pointer {
  cursor: pointer;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.4;
}