/* 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>
 */

$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: 20rem;
$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;

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%);
}

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

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

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

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

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

// 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;
}