@use "vuepress-shared/styles/svg";

$location-icon: '<svg viewBox="0 0 12 12"><path d="M6.5 3A1.5 1.5 0 1 0 8 4.5 1.5 1.5 0 0 0 6.5 3zm0-3A4.5 4.5 0 0 0 2 4.5a5.607 5.607 0 0 0 .087.873c.453 2.892 2.951 5.579 3.706 6.334a1 1 0 0 0 1.414 0c.755-.755 3.253-3.442 3.706-6.334A5.549 5.549 0 0 0 11 4.5 4.5 4.5 0 0 0 6.5 0zm3.425 5.218C9.565 7.514 7.632 9.868 6.5 11 5.369 9.868 3.435 7.514 3.075 5.218A4.694 4.694 0 0 1 3 4.5a3.5 3.5 0 0 1 7 0 4.634 4.634 0 0 1-.075.718z" fill="#fff"/></svg>';

.bing-switch {
  // This overrides an existing style
  position: absolute !important;
  inset-inline-end: 0.75rem;
  bottom: 0.75rem;

  // This overrides an existing style
  z-index: 5 !important;

  display: flex;
  align-items: center;

  color: #eee;
}

.bing-switch-prev {
  &::after {
    transform: scale(0.25) translateX(25%) rotate(45deg);

    [dir="rtl"] & {
      transform: scale(0.25) translateX(-25%) rotate(225deg);
    }
  }
}

.bing-switch-next {
  &::after {
    transform: scale(0.25) translateX(-25%) rotate(225deg);

    [dir="rtl"] & {
      transform: scale(0.25) translateX(25%) rotate(45deg);
    }
  }
}

.bing-switch-prev,
.bing-switch-next {
  position: relative;

  width: 2.5rem;
  height: 2.5rem;
  margin-inline-start: 0.25rem;
  border: none;
  border-radius: 0.375rem;

  background: rgb(0 0 0 / 40%);

  &:hover {
    cursor: pointer;
  }

  &::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-bottom: 0.5rem solid rgb(255 255 255 / 80%);
    border-inline-start: 0.5rem solid rgb(255 255 255 / 80%);
    border-radius: 0.5rem;
  }

  &[disabled] {
    &:hover {
      cursor: not-allowed;
    }

    &::after {
      border-color: rgb(204 204 204 / 80%);
    }
  }
}

.bing-location {
  display: inline-block;

  padding: 0 0.75rem;
  border-radius: 0.375rem;

  background-color: rgb(0 0 0 / 40%);

  line-height: 2.5rem;

  cursor: pointer;
}

.bing-location-icon {
  @include svg.background-svg($location-icon);

  display: inline-block;
  vertical-align: middle;

  width: 1rem;
  height: 1rem;
  margin-inline-end: 0.5rem;

  line-height: 1;
}

.bing-info {
  position: absolute;
  inset: auto 0 calc(100% + 4px);
  z-index: 200;

  padding: 0.5rem;
  border-radius: 0.375rem;

  background-color: rgb(0 0 0 / 50%);

  font-weight: normal;
  font-family: var(--vp-font);
  line-height: 1.25;

  cursor: default;

  transition: opacity var(--vp-t-transform);

  hr {
    border-color: #eee;
  }
}

.bing-info-header {
  color: inherit;
  font-weight: 600;
  font-size: 1.1em;
}

.bing-info-body {
  font-size: 0.9em;
}

.bing-info-copyright {
  padding: 0.5rem 0.25rem;
  color: #aaa;
  font-size: 0.8em;
}