/* 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: 13rem;
$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;
}

html {
  overflow: hidden;
}

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

.debug2 {
  border: 1px solid magenta;
}

.debug3 {
  border: 1px solid greenyellow;
}

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

.box-control {
  display: flex;
  color: #888;
  padding: 4px 7px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  &.small {
    padding: 4px;
  }
  &:hover {
    color: #666;
    background-color: #eee;
  }
}

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

.box-body {
  padding: 0.75rem;
  text-align: left;
  position: relative;
}

// 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 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.pointer {
  cursor: pointer;
}

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

.btn-xs {
  padding: 0.3rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1;
}

.snotifyToast {
  text-align: left;
  border-radius: 0.25rem;
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
  border-left: 0 !important;
  &.snotify-info {
    border-top: 4px solid $color-info;
    .snotify-icon--info {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E");
    }
  }
  &.snotify-error {
    border-top: 4px solid #f44336;
  }
  .snotifyToast__title {
    font-size: 1.2rem;
  }
  .snotifyToast__body {
    white-space: pre-line;
  }
}

select.form-control-sm.small {
  padding: 0.25rem 0.1rem;
  font-size: 0.75rem;
}

input.form-control-sm.small {
  padding: 0.25rem 0.2rem;
  font-size: 0.75rem;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wh-100 {
  width: 100% !important;
  height: 100% !important;
}

.wh-50 {
  width: 50% !important;
  height: 50% !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: $color-info;
  background-color: $color-info;
}