// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
@use "sass:math";
@use "@energinet-datahub/watt/utils" as watt;

$arrow-size: 8px;
$offset: 6px;

:host {
  position: absolute;
  left: 0; /* Prevent overflow on right side */
  pointer-events: none;
  z-index: 1000;
  display: inline-block;
  line-height: 18px;
  border-radius: 6px;
  @include watt.space-inset-squish-s;
  @include watt.typography-watt-text-s;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  &.tooltip-dark {
    background: var(--watt-color-primary-dark);
    color: var(--watt-color-primary-dark-contrast);
  }

  &.tooltip-light {
    background: var(--watt-color-neutral-white);
    color: var(--watt-color-primary-light-contrast);
  }

  &.show {
    opacity: 1;
  }

  &[data-popper-placement^="top"] {
    inset-block-end: $offset !important;
  }

  &[data-popper-placement^="bottom"] {
    inset-block-start: $offset !important;
    > .arrow {
      top: -#{math.div($arrow-size, 2)};
    }
  }

  &[data-popper-placement^="left"] {
    inset-inline-end: $offset !important;
    > .arrow {
      right: -#{math.div($arrow-size, 2)};
    }
  }

  &[data-popper-placement^="right"] {
    inset-inline-start: $offset !important;
    > .arrow {
      left: -#{math.div($arrow-size, 2)};
    }
  }

  &[data-popper-placement="left"],
  &[data-popper-placement="right"] {
    > .arrow {
      top: calc(50% - math.div($arrow-size, 2));
    }
  }

  &[data-popper-placement="top"],
  &[data-popper-placement="bottom"] {
    > .arrow {
      left: calc(50% - math.div($arrow-size, 2)) !important;
    }
  }

  &[data-popper-placement="top-end"],
  &[data-popper-placement="bottom-end"] {
    > .arrow {
      left: 10px !important;
    }
  }

  &[data-popper-placement="top-start"],
  &[data-popper-placement="bottom-start"] {
    > .arrow {
      left: calc(100% - ($arrow-size + 10px));
    }
  }
}

.arrow,
.arrow::before {
  position: absolute;
  width: $arrow-size;
  height: $arrow-size;
  background: inherit;
}

.arrow {
  visibility: hidden;
}

.arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}
