/**
 * 1. Truncate the layer name
 * 2. For showing the layer details toggle above the following entry
 */

.mapTocEntry {
  position: relative;
  padding: $euiSizeS;
  border-bottom: 1px solid $euiColorLightestShade;

  &:hover,
  &:focus,
  &:focus-within {
    z-index: 2; /* 2 */

    .mapTocEntry__layerIcons,
    .mapTocEntry__detailsToggle {
      display: block;
      animation: mapTocEntryBecomeVisible $euiAnimSpeedFast $euiAnimSlightResistance;
    }
  }

  .mapTocEntry__layerIcons,
  .mapTocEntry__detailsToggle {
    &:hover,
    &:focus {
      display: block;
      animation: mapTocEntryBecomeVisible $euiAnimSpeedFast $euiAnimSlightResistance;
    }
  }
}

.mapTocEntry-isInEditingMode {
  background-color: tintOrShade($euiColorPrimary, 90%, 70%) !important;
  font-size: $euiFontSizeXS;
  font-weight: $euiFontWeightMedium;

  &__row {
    margin-left: $euiSizeL;
    display: inline-flex;
    align-items: center;

    > * {
      margin-right: $euiSizeXS;
    }
  }

  &__editFeatureText {
    line-height: 1;
    padding-right: $euiSizeXS;
  }
}

.mapTocEntry-isDragging {
  @include euiBottomShadowMedium;
}

.mapTocEntry-isDraggingOver {
  background-color: $euiColorEmptyShade;
  // Don't allow interaction events while layer is being re-ordered
  // sass-lint:disable-block no-important
  pointer-events: none !important;
}

.mapTocEntry-isCombineLayer {
  transition: background-color $euiAnimSpeedExtraSlow ease;
  background-color: transparentize($euiColorSuccess, .75);
}

.mapTocEntry-isSelected {
  background-color: tintOrShade($euiColorLightShade, 60%, 20%);
}

.mapTocEntry-visible,
.mapTocEntry-notVisible {
  display: flex;
}

.mapLayTocActions {
  overflow: hidden; /* 1 */
  flex-grow: 1;
}

.mapLayTocActions__tooltipAnchor {
  max-width: 100%;
}

.mapTocEntry-notVisible .mapTocEntry__layerName {
  opacity: .5;
}

.mapTocEntry__grab:hover {
  cursor: grab;
}

.mapTocEntry__layerName {
  font-weight: $euiFontWeightMedium;
}

.mapTocEntry__layerNameText {
  display: flex;
  align-items: center;
}

.mapTocEntry__layerNameIcon {
  flex-shrink: 0;
  margin-right: $euiSizeS;

  > * {
    vertical-align: sub;
  }
}

.mapTocEntry__layerIcons {
  flex-shrink: 0;
  display: none;
}

.mapTocEntry__detailsToggle {
  position: absolute;
  display: none;
  left: 50%;
  top: $euiSizeXL;
  transform: translateX(-50%);
}

.mapTocEntry__detailsToggleButton {
  background-color: $euiColorEmptyShade;
  border: $euiBorderThin;
  color: $euiTextColor;
  border-radius: calc($euiBorderRadius / 2);
  height: $euiSize;
  width: $euiSizeXL;
  line-height: $euiSize;
  text-align: center;

  &:focus {
    @include euiFocusRing;
  }
}

.mapTocEntry__layerDetails {
  @include euiOverflowShadow;
  background-color: $euiPageBackgroundColor;
  padding: $euiSize $euiSizeS $euiSizeS;
  margin: $euiSizeS (-$euiSizeS) (-$euiSizeS);
}

@keyframes mapTocEntryBecomeVisible {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
