/*!
 *  Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

@import '@bci-web-core/common-styles/sass/bci/_bci-variables.scss';
@import '@bci-web-core/common-styles/sass/bci/_bosch-ic-legacymapping.scss';
@import 'ol/ol';

:host {
  width: 100%;
  height: 100%;
  flex: 1;
}

:focus {
  outline: none;
}

.ol-control button {
  display: block;
  margin: 0;
  color: $boschGray20;
  font-size: 3 * $grid-size;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  height: 4 * $grid-size;
  width: 4 * $grid-size;
  line-height: 0.4em;
  transition: $transition-time-quarter;
  cursor: pointer;

  &,
  &:focus {
    background-color: $boschWhite;
  }

  &:hover {
    background-color: $boschGray95;
    color: #000;
  }

  &:active {
    transition: 0s;
    background-color: $boschGray85;
  }
}

.ol-control {
  border: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;

  button {
    border-radius: 0;
    border: 1px solid $boschGray40;
    color: $boschGray40;
  }
}

.ol-full-screen {
  top: unset;
  right: $grid-size * 2;
  bottom: $grid-size * 11;

  .ol-full-screen-false,
  .ol-full-screen-true {
    &:before {
      display: inline;
      font-family: Bosch-Ic;
    }
  }

  .ol-full-screen-false:before {
    content: $bosch-ic-fullscreen;
  }

  .ol-full-screen-true:before {
    content: $bosch-ic-minimize;
  }
}

.ol-control.ol-zoom {
  bottom: $grid-size * 2;
  right: $grid-size * 2;
  top: unset;
  left: unset;

  .ol-zoom-in {
    border-radius: 0;
  }

  .ol-zoom-out {
    border-radius: 0;
    border-top: none;
  }

  .divider {
    background-color: rgb(90%, 90%, 90%);
    height: 1px;
    left: 5px;
    position: absolute;
    top: 28px;
    width: 19px;
    z-index: 3;
  }
}

.ol-attribution.ol-uncollapsible {
  font-size: 8px;
  height: 14px;
  right: -2px;
}

.canvasArea {
  width: 100%;
  height: 100%;
  background-color: $boschWhite;
  position: relative;
  overflow: hidden;
}

.canvasArea canvas {
  /*
  Avoid map distortion.
  Openlayer 4.6.5 uses offsetWidth/Height instead of clientWidth/Height so 'none' does not work correctly,
  therefore cover or contain are probably the best options, only resulting in some scaling as worst case.
   */
  object-fit: cover;
}

.maps-dark-theme {
  background-color: $boschGray20;
}
