@import "ol/ol";
@import "./icons/hslayers-ng-fa-icons";

$table-group-separator-color: white;
$list-group-item-padding-y: 0.75rem;
$list-group-item-padding-x: 1.25rem;

html:has(div.hs-layout.hsl.hs-mobile-view) {
  font-size: var(--hs-mobile-view-font-size-base, 140%);
}

/*Import parts of the bootstrap outside hsl class to allow :root*/
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";

.hsl,
.hsl::before,
.hsl::after,
.hsl * .hsl *::before,
.hsl *::after {
  all: revert;
}

.hsl {
  container-type: inline-size;
  container-name: hslayers-element;

  @import "bootstrap/scss/reboot";
  @import "bootstrap/scss/type";
  @import "bootstrap/scss/images";
  @import "bootstrap/scss/containers";
  @import "bootstrap/scss/grid";
  @import "bootstrap/scss/tables";
  @import "bootstrap/scss/forms";
  @import "bootstrap/scss/buttons";
  @import "bootstrap/scss/transitions";
  @import "bootstrap/scss/dropdown";
  @import "bootstrap/scss/button-group";
  @import "bootstrap/scss/nav";
  @import "bootstrap/scss/navbar";
  @import "bootstrap/scss/card";
  @import "bootstrap/scss/accordion";
  //@import "bootstrap/scss/breadcrumb";
  @import "bootstrap/scss/pagination";
  @import "bootstrap/scss/badge";
  @import "bootstrap/scss/alert";
  @import "bootstrap/scss/progress";
  @import "bootstrap/scss/list-group";
  @import "bootstrap/scss/close";
  @import "bootstrap/scss/toasts";
  @import "bootstrap/scss/modal";
  @import "bootstrap/scss/tooltip";
  @import "bootstrap/scss/popover";
  // @import "bootstrap/scss/carousel";
  @import "bootstrap/scss/spinners";
  // @import "bootstrap/scss/offcanvas";

  // Helpers
  @import "bootstrap/scss/helpers";

  // Utilities = default utilities + custom utilities
  @import "./bootstrap-utilities";


  @for $i from 0 through 20 {
    &:not(.hs-mobile-view) .hs-panelspace *.hs-panelplace>*>.hs-panel-width-#{400 + ($i * 25)} {
      width: 400 + ($i * 25)+px;
    }
  }

  hs-panel-container.hs-panelplace>*>div[class*="hs-panel-width-"] {
    max-width: 65rem;
    margin: auto
  }

  .form-control:not(.form-control-sm):not(.form-control-lg) {
    font-size: $font-size-base;
  }

  //CSS override for each bs5 theme-color - used to force style against hub themes
  @each $color,
  $value in $theme-colors {
    .btn-#{$color} {
      &:focus:not(.bg-transparent) {
        background-color: var(--bs-btn-hover-bg) !important;
        color: var(--bs-btn-active-color) !important;
      }

      &:hover:not(.bg-transparent) {
        background-color: var(--bs-btn-hover-bg) !important;
      }

      &.active:not(.bg-transparent),
      &:active:not(.bg-transparent) {
        color: var(--bs-btn-active-color) !important;
        background-color: var(--bs-btn-active-bg) !important;
        border-color: var(--bs-btn-active-border-color) !important;
      }

      &.disabled:not(.bg-transparent),
      &:disabled:not(.bg-transparent) {
        background-color: var(--bs-btn-disabled-bg) !important;
      }
    }
  }

  .hs-comp-item-body a.btn:hover,
  .hs-catalogue-item-body a.btn:hover,
  .hs-catalogue-item-body button.btn:hover {
    box-shadow: #0000003d 0px 3px 8px;
  }

  .card {
    box-shadow: none;
  }

  .alert {
    width: auto;
  }

  .alert-status {
    color: $secondary;
  }

  //Dropped in b5. suggested to use utilities mb-*. Might refactor later
  .form-group {
    margin-bottom: 1rem;
  }

  .navbar-expand .nav-item {
    align-items: flex-start;
  }

  .basemapGallery .dropdown-menu {
    overflow: visible;
  }

  hs-add-data-catalogue {
    .hs-catalogue-list-item-title {
      color: inherit;
      text-decoration: none;
    }

    hs-catalogue-list-item>div.disabled .hs-catalogue-list-item-title {
      color: $secondary;
      opacity: 50%;
    }

    .dropdown-menu {
      max-width: revert;
    }
  }

  .list-group-item+.list-group-item {
    border-top-width: 0px;
  }

  .hs-url-table {
    tr td {
      display: table-cell;
    }

    .text-light th {
      color: $light;
    }
  }

  .nav-link[class*='btn-']:hover {
    color: white;
  }

  /* app css stylesheet */
  .icon-spin {
    -webkit-animation: spin 1500ms infinite linear;
    animation: spin 1500ms infinite linear;
    position: relative;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  }

  .icon-primary {
    color: $primary;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }

  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }

  .hs-wms-expandedRow {
    white-space: break-spaces;
  }

  .hs-wms-highlighted {
    cursor: pointer;

    &>span {
      pointer-events: none;
    }
  }

  .hs-wms-highlighted:hover {
    background-color: #d2d8dd96;
  }

  .hs-flex-fill {
    flex: 1 1 auto;
  }

  .hs-greyscale {
    filter: grayscale(100%);
  }

  .grayed {
    color: #cccccc;
  }

  .hs-main-panel {
    border: none;
    margin-bottom: 0;
  }

  div.hs-main-panel:not(.hs-stc-mainpanel)>div.card-body {
    padding: 0px;
  }

  .hs-map-space {
    min-height: inherit;
    flex: 1 1 auto;
    position: relative;
  }

  .hs-map-space>hs-panel-container {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
  }

  /* To not disable pointer-events for all hs-panel-containers children too*/
  .hs-map-space hs-panel-container>* {
    pointer-events: auto;
  }

  .flex-reverse {
    flex-direction: row-reverse;
  }

  .fill {
    min-height: 100%;
    height: 100%;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .hs-info-container {
    pointer-events: none;
  }

  .hs-filter {
    border: 0 !important;
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
  }

  .hs-save-map-filter {
    border: 0 !important;
    border-radius: 0.25rem !important;
  }

  .hs-save-map-users-list {
    overflow-y: auto;
    height: min-content;
    max-height: 50vh;

    &.collapsed {
      max-height: 10rem;
    }
  }

  .hs-layerpanel {
    // max-height: 27.875em;
    overflow-y: auto;
    border: 0;
    margin-bottom: 0;
    border-bottom: 0;
    word-wrap: break-word;
  }

  progress::-webkit-progress-value {
    transition: width 0.1s ease;
  }

  .hs-save-comp-advanced-panel {
    margin-top: 10px;
  }

  .hs-comp-ext-row {
    margin-left: 0;
    margin-right: 0;
  }

  .hs-comp-ext {
    padding-left: 3px;
    padding-right: 3px;
  }

  .hs-comp-ext input {
    text-align: center;
    padding: 3px 6px;
  }

  .hs-lm-header:first-child,
  .hs-lm-list:first-child,
  .hs-lm-item:first-child,
  .hs-comp-header:first-child,
  .hs-comp-list:first-child,
  .hs-comp-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .hs-lm-list:last-child,
  .hs-lm-item:last-child,
  .hs-comp-list:last-child,
  .hs-comp-item:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  input.hs-waypoint-name {
    display: inline-block;
    width: calc(100% - 2.8125em);
  }

  .hs-tab-single-datasources a {
    cursor: pointer;
  }

  ul.hs-comp-list {
    margin-bottom: 0;
    overflow-y: auto;
  }

  .modal.in {
    display: block;
    background-color: #0e0e0d38;
  }

  .modal-backdrop {
    visibility: hidden;
  }

  .form-control {
    border-radius: 0;
  }

  input[type="range"].form-control {
    padding: 0;
  }

  .capabilities_label {
    padding-right: 0px;
    padding-left: 0px;
  }

  .capabilities_input {
    padding-right: 0px;
    padding-left: 15px;
  }

  hr {
    margin-top: 0px;
    margin-bottom: 5px;
  }

  a {
    cursor: pointer;
  }

  .input-group-append [class^="fa-"] {
    font-size: 0.85rem;
  }

  .but-title-sm {
    float: right;
    font-size: 0.85rem;
    line-height: 17px;
    color: $secondary;
    filter: alpha(opacity=20);
    opacity: 0.35;
  }

  .but-title-sm:hover {
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: 0.8;
  }

  button.but-title-sm {
    -webkit-appearance: none;
    cursor: pointer;
    background: 0 0;
    border: 0;
  }

  .popover-content {
    min-width: 230px;
  }

  .popover {
    max-width: 1000px;
    max-height: 1000px;
  }

  .thumbnail {
    margin-top: 3px;
    margin-bottom: 3px;
  }

  .list-group-item.active a {
    color: #fff;
  }

  .list-group-item.active {
    background-color: $primary;
    border-color: $primary;
    color: white;
  }

  .modal {
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

  /****************/
  /** CHECKBOXES **/
  /****************/
  .hs-checkmark,
  .hs-uncheckmark {
    position: relative;
    cursor: pointer;
    margin-right: 0.3em;
  }

  .hs-checkmark::before {
    content: "\2713";
  }

  .hs-uncheckmark::before {
    content: "\00a0 ";
  }

  .hs-checkmark::before,
  .hs-uncheckmark::before {
    color: hsl(0, 0%, 100%);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-color: $primary;
    padding: 0.09em 0.4em 0.05em 0.35em;
    border-radius: 0.2em;
    font-weight: 1000;
    font-size: 0.8rem;
  }

  .hs-uncheckmark::before {
    background-color: hsl(0, 0%, 100%);
    box-shadow: inset 0 0 0 0.2em $primary;
  }

  .hs-checkmark.hs-btn-baselayers::before {
    color: $primary;
    background-color: hsl(0, 0%, 100%);
  }

  .sublayerContainer .hs-checkmark::before,
  .sublayerContainer .hs-uncheckmark::before,
  .form-check .hs-checkmark::before,
  .form-check .hs-uncheckmark::before {
    margin-right: 0.5em;
  }

  /********************/
  /** STATUS CREATOR **/
  /********************/

  .hs-stc-footer {
    text-align: center;
    margin-top: 10px;
  }

  #stc-layerlist .list-group-item {
    padding: 0.15rem;
    border: 0;

    label {
      cursor: pointer;
    }

    &:hover {
      background-color: $light;
    }
  }

  .hs-stc-footer button {
    width: 100px;
  }

  /*********/
  /** OWS **/
  /*********/

  #hs-ows-abstract {
    resize: vertical;
    min-height: 100px;
  }

  .hs-advanced-options {
    margin-top: 10px;
  }

  .hs-ows-layerlistheading {
    background-color: hsl(0, 0%, 93%);
  }

  hs-panel-header {
    background-color: white;
  }

  /**********************************/
  /** SIDEBAR&TOOLBAR RESPONSIVITY **/
  /**********************************/

  &.hs-mobile-view {

    .d-mw-md-block:not(:has(> span.disabled)) {
      display: flex !important;
      justify-content: center
    }

    input[type="checkbox"] {
      margin-right: 0.5em;
      margin-left: 0.5em;
    }

    div .form-check-inline {
      margin-right: 0 !important;
    }

    .hs-sb-bottom .hs-ol-map {
      width: 100% !important;
    }

    /* Next is needed on iPhone/Safari even if the position gets 
		overridden with 'relative' afterwards. Without 'absolute' here the 
		map doesn't display - height stays 0px. */
    .ol-viewport {
      position: absolute !important;
    }

    .panel-footer {
      padding: 5px;
    }

    .panel-footer {
      padding: 5px;
    }

    .hs-filter {
      display: none !important;
    }

    .ol-attribution.ol-uncollapsible {
      bottom: 0.2em;
    }

    .ol-attribution ul {
      margin: 0;
    }

    .ol-control button {
      font-size: 1rem;
    }

    .hs-ol-map .ol-zoom {
      bottom: 2rem;
      top: auto;
      right: 5px;
      left: auto;
    }

    div.hs-info-container {
      display: none;
    }

    .dropzone-container {
      flex-direction: column;
    }

    .hs-draw-selectAll {
      font-size: 1rem;
    }

    #stc-layerlist .list-group-item {
      padding: 1rem;
    }

    .hs-form-thumbnail-container {
      flex-direction: column;
    }
  }

  ul[dnd-list],
  ul[dnd-list]>li {
    position: relative;
  }

  /**
	* The dnd-list should always have a min-height,
	* otherwise you can't drop to it once it's empty
	*/
  ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
    margin-left: -23px;
    margin-right: -20px;
  }

  /**
	* The dndDraggingSource class will be applied to
	* the source element of a drag operation. It makes
	* sense to hide it to give the user the feeling
	* that he's actually moving it.
	*/
  ul[dnd-list] .dndDraggingSource {
    display: none;
  }

  /**
	* An element with .dndPlaceholder class will be
	* added to the dnd-list while the user is dragging
	* over it.
	*/
  ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
  }

  /**
	* The dnd-lists's child elements currently MUST have
	* position: relative. Otherwise we can not determine
	* whether the mouse pointer is in the upper or lower
	* half of the element we are dragging over. In other
	* browsers we can use event.offsetY for this.
	*/
  ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding-top: 7px;
    margin-bottom: -1px;
    line-height: 1em;
    padding-left: 3px;
    padding-right: 2px;
    padding-bottom: 0px;
  }

  /**
	* Show selected elements in green
	*/
  ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
  }

  .hs-senslog-sensor {
    color: #333;
  }

  .input-group-btn .btn {
    height: 34px;
  }

  .badge.bg-warning {
    height: 100%;
    width: 1.75em;
    line-height: inherit;
  }

  .btn-group>.btn {
    float: initial;
  }

  .draw-buttons button {
    margin-left: 0.3em;
  }

  .card-href {
    color: $gray-900;
    width: 100%;
    display: inline-block;
  }

  @media only screen and (min-width: 600px) {
    .hs-layout .layout-row {
      position: relative;
    }
  }

  #permalink-link {
    overflow-x: hidden;
  }

  .hs-dotted-line {
    border: 1px dotted #495057;
    border-style: none none dotted;
    color: #495057;
    background-color: hsla(0, 0%, 0%, 0.2);
  }

  .hs-extra-buttons {
    line-height: 1em;
    float: right;
    margin-right: 0.5em;
  }

  extra-buttons a.dropdown-item i {
    padding-right: 0.2rem;
  }

  .dropdown-toggle.hs-custom-toggle::after {
    display: inline-block;
    width: 0.47em;
    height: 0.47em;
    margin: 0 0 0 0.4em;
    content: "";
    border: 0.3em solid;
    border-width: 0 0.15em 0.15em 0;
    transform: rotateZ(45deg);
    color: #495057;
  }

  .dropdown-toggle.hs-custom-toggle:focus {
    box-shadow: 0 0 0 0.2rem hsla(211, 100%, 50%, 0.25) !important;
  }

  .hs-background-alfa {
    background-color: #edf0f2;
  }

  .hs-toolbar-button {
    height: 2.4em;
  }

  .dropdown-menu.datetime-picker-menu {
    min-width: 22rem;
  }

  a.hs-sensor-type {
    color: hsl(0, 0%, 0%);
  }

  a.hs-sensor-unit {
    color: hsl(0, 0%, 0%);
    font-weight: bold;
  }

  .hs-sensor {
    line-height: 1.9em;
  }

  .hs-date-time-chevron:not(*:root) {
    /* Supports only WebKit browsers */
    visibility: hidden;
  }

  .form-inline .ngb-tp-input {
    width: 4em;
  }

  hs-layer-editor .form-check {
    line-height: 1.5;
  }

  hs-layer-editor .card-body {
    padding: 0.65rem;
  }

  hs-layer-editor hr {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }

  hs-layer-editor-sublayers+hs-layer-editor>div.card {
    border-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;

  }

  hs-layer-editor-sublayers:has(+ hs-layer-editor) {
    display: block;
    border: 1px solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0;

    & div.card-body {
      padding-bottom: 0;
    }
  }

  .hs-layerpanel {
    overflow-x: hidden;
  }

  .hs-hover-popup-feature {
    font-size: 0.8rem;
    line-height: 1;
    margin-bottom: 2px;
    border-bottom: 1px solid hsl(0, 0%, 78%);
  }

  .hs-draw-layer-toggle div {
    display: inline-block;
    max-width: 7em;
    overflow-x: hidden;
    line-height: normal;
  }

  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }

  .inputfile+label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: $primary;
    display: inline-block;
    cursor: pointer;
  }

  .inputfile+label:hover {
    background-color: $secondary;
  }

  input[type="checkbox"].checkbox-lg {
    transform: scale(1.3);
  }

  //**DROPZONE **//
  .dropzone-container {
    flex-direction: row;
  }

  .dropzone {
    text-align: center;
    min-height: 80px;
    border: dashed 3px $primary;
    border-radius: 5px;
    color: #495057 !important;
  }

  .dropzone.active {
    border: solid 3px $secondary;
    color: rgba(0, 0, 0, 0.35) !important;
    opacity: 0.4;
  }

  .dropzone .dropzone-label {
    display: block;
    font-size: 1em;
  }

  /////////////////////

  .hs-endpoint-item-active {
    background-color: hsla(0, 0%, 0%, 0.2);
  }

  .hs-popup-layer {
    line-height: 1.2;
    border-top: 1px solid rgba(200, 200, 200, 0.5)
  }

  .hs-vector-layer-legend {
    svg {
      background: white;
    }
  }

  .hs-styler-rule {
    cursor: move;
  }

  .hs-styler-rule:hover {
    box-shadow: none;
  }

  /*
  * Loader by https://cssloaders.github.io/
  */
  .hs-loader {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    background: white;
    transform: rotateX(65deg) rotate(45deg);
    color: $gray-200;
    animation: layers1 1s linear infinite alternate;
    margin: 0 0.5em;
  }

  .hs-loader-dark {
    background: $primary;
    color: $gray-400
  }

  .hs-loader:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    animation: layerTr 1s linear infinite alternate;
  }

  .hs-loader-dark:after {
    background: rgba(82, 162, 216, 0.7);
  }

  @keyframes layers1 {
    0% {
      box-shadow: 0px 0px 0 0px
    }

    90%,
    100% {
      box-shadow: 0.75em 0.75em 0 -1px
    }
  }

  @keyframes layerTr {
    0% {
      transform: translate(0, 0) scale(1)
    }

    100% {
      transform: translate(-0.75em, -0.75em) scale(1)
    }
  }

  @import "../core/hslayers.component.scss";
  @import "../components/layer-manager/layer-manager.component.scss";
  @import "../components/layer-manager/logical-list/layerlist.component.scss";
  @import "../components/layer-manager/gallery/layer-manager-gallery.component.scss";
  @import "../components/sidebar/sidebar.component.scss";
  @import "../components/geolocation/geolocation.component.scss";
  @import "../components/sidebar/impressum.component.scss";
  @import "../components/search/search.component.scss";
  @import "../components/info/info.component.scss";
  @import "../components/toolbar/toolbar.component.scss";
  @import "../components/add-data/common/common.component.scss";
  /* **OPENLAYERS** */

  .ol-attribution {
    left: auto;
    right: 5px;
    bottom: 0.2rem;
  }

  .ol-attribution.ol-uncollapsible {
    right: 5px;
    bottom: 0.2rem;
  }

  .hs-ol-map .ol-scale-line {
    right: auto;
    left: 0.5rem;
  }

  .hs-ol-map .ol-zoom {
    bottom: 2.4rem;
    top: auto;
    right: 5px;
    left: auto;
  }

  .hs-ol-map .hs-defaultView {
    bottom: 5rem;
    top: auto;
    right: 5px;
    left: auto;
  }

  .ol-touch .ol-zoomslider {
    display: none;
  }

  .ol-mouse-position {
    bottom: 8px;
    left: 170px;
    position: absolute;
    color: #fff;
    top: auto;
    right: auto;
  }

  .ol-popup {
    display: none;
    position: absolute;
    background-color: hsl(0, 0%, 100%);
    padding: 0 15px 15px 15px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
  }

  .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .ol-popup:after {
    border-top-color: hsl(0, 0%, 100%);
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }

  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }

  .ol-popup-content {
    min-width: var(--hs-ol-popup-content-min-width, 200px);
    max-height: var(--hs-ol-popup-content-max-height, 45vh);
    overflow-x: auto;
  }

  .ol-popup-closer {
    margin-left: auto;
    width: 15px;
    display: block;
    font-size: 1.5rem;
    color: gray;
    text-decoration: none;
  }

  .ol-popup-closer:after {
    content: "\2716";
  }

  .ol-popup div.infoResult {
    min-width: 130px;
  }

  .ol-popup div.infoResult p {
    padding: 0.1em;
    margin: 0;
  }

  .ol-popup-content h3 {
    margin: 0.25em 0;
  }

  .ol-popup.marker {
    margin-bottom: 30px;
  }

  .ol-overlaycontainer-stopevent {
    pointer-events: none;
  }

  .ol-overlaycontainer-stopevent * {
    pointer-events: auto;
  }

  .ol-control button {
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica,
      sans-serif;

    &:hover,
    &:active {
      background-color: $secondary;
      color: white;
      outline: none;
    }
  }

  /**
 * Taken from https://github.com/Viglino/ol-ext/blob/master/dist/ol-ext.css#L4030
 */

  .ol-swipe {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-touch-action: none;
    touch-action: none;

    & button {
      box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
      background-color: var(--ol-subtle-foreground-color);

      &:active,
      &:hover {
        cursor: pointer;
        background-color: $secondary;
      }
    }
  }

  .ol-swipe:before {
    content: "";
    position: absolute;
    top: -5000px;
    bottom: -5000px;
    left: 50%;
    width: 2px;
    background-color: var(--ol-subtle-foreground-color);
    z-index: -1;
    -webkit-transform: translate(-2px, 0);
    transform: translate(-2px, 0);
    pointer-events: none;

  }

  .ol-swipe.horizontal:before {
    left: -5000px;
    right: -5000px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .ol-swipe:after,
  .ol-swipe button:before,
  .ol-swipe button:after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 50%;
    width: 2px;
    background: var(--ol-background-color);
    transform: translate(-1px, 0);
    -webkit-transform: translate(-1px, 0);
    pointer-events: none;
  }

  .ol-swipe button:after {
    transform: translateX(5px);
    -webkit-transform: translateX(5px);
  }

  .ol-swipe button:before {
    transform: translateX(-7px);
    -webkit-transform: translateX(-7px);
  }


  .sketch-picker {
    margin: 7px;
  }
}