// Table of Contents
// ==================================================
// Popover

// scss-lint:disable NestingDepth

// Popover
// ==================================================
.popover {
  background: color(white);
  border: 1px solid color(haze);
  border-radius: border-radius(b);
  color: color(slate);
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  white-space: normal;
  width: 276px;
  z-index: 1070;

  .arrow,
  .arrow::after {
    border-style: solid;
    border-color: color(transparent);
    display: block;
    height: 0;
    position: absolute;
    width: 0;
  }
  .arrow {
    border-width: 11px;

    &::after {
      border-width: 10px;
      content: '';
    }
  }

  &.bottom {
    margin-top: 10px;

    .arrow {
      border-bottom-color: inherit;
      border-top-width: 0;
      left: 50%;
      margin-left: -11px;
      top: -11px;

      &::after {
        border-bottom-color: color(light-haze);
        border-top-width: 0;
        margin-left: -10px;
        top: 1px;
      }
    }
  }
  &.left {
    margin-left: -10px;

    .arrow {
      border-left-color: inherit;
      border-right-width: 0;
      margin-top: -11px;
      right: -11px;
      top: 50%;

      &::after {
        border-left-color: color(white);
        border-right-width: 0;
        bottom: -10px;
        right: 1px;
      }
    }
  }
  &.right {
    margin-left: 10px;

    .arrow {
      border-left-width: 0;
      border-right-color: inherit;
      left: -11px;
      margin-top: -11px;
      top: 50%;

      &::after {
        border-left-width: 0;
        border-right-color: color(white);
        bottom: -10px;
        left: 1px;
      }
    }
  }
  &.top {
    margin-top: -10px;

    .arrow {
      border-bottom-width: 0;
      border-top-color: inherit;
      bottom: -11px;
      left: 50%;
      margin-left: -11px;

      &::after {
        border-bottom-width: 0;
        border-top-color: color(white);
        bottom: 1px;
        margin-left: -10px;
      }
    }
  }
  &.dark {
    &.bottom {
      .arrow::after { border-bottom-color: color(light-slate); }
    }
    &.left {
      .arrow::after { border-left-color: color(slate); }
    }
    &.right {
      .arrow::after { border-right-color: color(slate); }
    }
    &.top {
      .arrow::after { border-top-color: color(slate); }
    }

    .popover-title {
      background: color(light-slate);
      border-color: color(dark-slate);
    }
  }
  &.light {
    &.bottom {
      .arrow::after { border-bottom-color: color(haze); }
    }
    &.left {
      .arrow::after { border-left-color: color(light-haze); }
    }
    &.right {
      .arrow::after { border-right-color: color(light-haze); }
    }
    &.top {
      .arrow::after { border-top-color: color(light-haze); }
    }

    .popover-title { background: color(haze); }
  }
}
.popover-content { padding: 15px; }
.popover-title,
.popover-nav {
  padding: 10px 15px;

  &:empty { display: none; }
}
.popover-title {
  background: color(light-haze);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-left-radius: border-radius(b);
  border-top-right-radius: border-radius(b);
  display: block;
  font-weight: text-weight(semibold);
}
.popover-nav {
  border-top-style: solid;
  border-top-width: 1px;
}