@import '../_variables.scss';
@import '~openlayers/dist/ol';
@import 'layer-switcher.scss';

.map {
  flex: 1;
  min-height: 0;
  padding: $default-spacing;

  > div {
    border-radius: $border-radius;
    box-shadow: $box-shadow;
  }
}

.ol-control {
  padding: 0;
  border-radius: $border-radius;
  border: $border-base;
  box-shadow: $box-shadow;

  button {
    background-color: $background-alpha;
    border-radius: $border-radius;
    color: $primary-color;
    cursor: pointer;
    margin: 0;
    font-size: 1em;
    line-height: 1;

    &:hover {
      background-color: $primary-alpha;
    }
  }
}

.ol-zoom {
  bottom: $default-spacing;
  left: $default-spacing;
  top: initial;
  border-radius: $border-radius;

  button {
    font-size: 1.5em;
  }
}

.ol-attribution {
  box-shadow: $box-shadow;
  bottom: $default-spacing;
  right: $default-spacing;
  background-color: $background-color;

  &:not(.ol-collapsed) {
    background-color: $background-color;

    button {
      &:before {
        content: '▶︎'
      }
    }
  }

  ul {
    font-size: 0.8em;
    color: $info-color;

    li {
      &:first-child {
        display: none;
      }
    }

    a {
      color: $primary-color;
      text-decoration: none;

      &:hover {
        color: darken($primary-color, 20%);
      }
    }
  }

  button {
    &:before {
      content: '◀︎'
    }

    span {
      display: none;
    }
  }
}

.info-popup {
  background-color: $background-color;
  border-radius: $border-radius;
  padding: $default-spacing;
  box-shadow: $box-shadow;
  min-width: 10em;
  max-width: 15em;
}

.info-box {
  dl {
    margin: 0;
    dt {
      font-size: 0.7em;
      text-transform: uppercase;
      color: $info-color;
    }

    dd {
      font-size: 1.1em;
      color: $primary-color;
      margin-left: 0;
      margin-bottom: $default-spacing;
      font-weight: bold;

      &.value:last-child {
        margin-bottom: 0;
      }
    }
  }
}