.v-popper__popper.v-popper--theme-tooltip {
  $triangle-size: 8px;
  $triangle-inner-size: $triangle-size - 1px;
  $center: calc(50% - #{$triangle-size});

  display: block !important;
  // z-index: z-index('tooltip');
  max-width: 50vw;

  .v-popper__inner {
    background: var(--tooltip-bg);
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    color: var(--tooltip-text);
    border-radius: 4px;
    padding: 8px;
  }


  // .tooltip-arrow {
  //   width: 0;
  //   height: 0;
  //   border: 0 solid transparent;
  //   position: absolute;
  //   z-index: 1;

  //   &:after {
  //     position: absolute;
  //     border: $triangle-inner-size solid transparent;
  //     content: '';
  //   }
  // }

  .v-popper__arrow-container {
    border: 0 solid transparent;
    z-index: 1;

    .v-popper__arrow-inner {
      border: $triangle-inner-size solid transparent;
    }
  }

  &[data-popper-placement^="top"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        // border-top-color: var(--tooltip-bg);
        // border-top-color: var(--tooltip-bg);
        border-top-color:var(--border);
      }
    }
  }


  &[data-popper-placement^="bottom"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        border-bottom-color: var(--border);
        background: transparent;
      }
    }
  }

  &[data-popper-placement^="right"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        border-right-color: var(--border);
      }
    }
  }

  &[data-popper-placement^="left"] {
    .v-popper__arrow-container {

      .v-popper__arrow-outer {
        border-left-color: var(--border);
      }
    }
  }

  &.tooltip-warning {
    .v-popper__inner {
      background: var(--tooltip-bg-warning);
      color: var(--tooltip-text-warning);
    }

    &[data-popper-placement^="top"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-top-color: var(--tooltip-bg-warning);
        }
      }
    }


    &[data-popper-placement^="bottom"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-bottom-color: var(--body-bg);
        }
      }
    }

    &[data-popper-placement^="right"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-right-color: var(--tooltip-bg-warning);
        }
      }
    }

    &[data-popper-placement^="left"] {
      .v-popper__arrow-container {
        .v-popper__arrow-outer {
          border-left-color: var(--tooltip-bg-warning);
        }
      }
    }
  }
}

.v-popper__popper {
  $color: var(--popover-bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);

  .v-popper__inner {
    border-radius: 4px;
    background: $color;
    color: var(--popover-text);
    padding: 10px;
    border-radius: var(--border-radius-lg);
    border: none;

    a {
      color: var(--popover-text);
    }
  }

  .v-popper__arrow-container {
    border-color: transparent;
    .v-popper__arrow-outer {
      border-color: transparent;
    }
  }
}

.v-popper__popper.v-popper--theme-dropdown {
  border-radius: 4px;
  z-index: z-index('tooltip');
  border: 1px solid #d9d9d9 !important;

  &.containerLogsDropdown, &.fleet-summary-tooltip{
    .v-popper__arrow-container {
      display: none;
    }
  }
}

.v-popper {
  display: inline;
}

.v-popper__popper.v-popper--theme-tooltip,
.v-popper {
  &[aria-hidden='true'] {
    // This removes it from the layout of ButtondropDown (so it doesn't render huge for SSR) but
    // still allows it to maintain it's dimensions for v-tooltip to calculate the appropriate position.
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}

//icon tooltip
.icon-info.v-popper--has-tooltip {
  font-size: 14px;
  color: var(--primary);
}

// .v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner, .v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
//   left: -3px;
// }
.v-popper__popper.v-popper--theme-tooltip .v-popper__arrow-container .v-popper__arrow-inner{
  border: 7px solid #fff;
}
.v-popper__arrow-inner{
  visibility: visible
}

.v-popper__popper{

  border: 0px;
}


.custom-dropdown{
  .v-popper__inner {
    padding: 0px;
  }
}

// .v-popper__arrow-container {
//   display: none; 
// }