@use 'src/styles/abstracts' as *;

.PopoverContent__container {
  position: relative;
  max-height: inherit;
  font-size: $text-sm;
  line-height: 15px;
  color: $pico-80;
  background-color: transparent;

  .PopoverContent {
    max-height: inherit;
    overflow: auto;
    padding-bottom: toRem(3px);
    position: relative;

    &__actionButtons {
      display: flex;
      padding: $space-xxxxs;
      height: 1.875rem;
      position: absolute;
      top: toRem(-28px);
      left: toRem(-1px);
      background: #fff;
      border: $border-main;
      border-bottom: transparent;
      border-radius: $space-xxxs $space-xxxs 0 0;
      box-shadow: -1px 1px 1px rgb(34 58 90 / 20%);
      &::after {
        content: '';
        height: $space-xxxs;
        width: calc(100% + 2px);
        background: #fff;
        position: absolute;
        bottom: toRem(-2px);
        left: toRem(-1px);
        border-left: $border-main;
      }
      &__actionButton {
        margin-left: $space-xxxxs;
        &__icon {
          color: $pico-70;
        }
        &.active {
          .PopoverContent__actionButtons__actionButton__icon {
            color: $primary-color;
          }
        }
      }
    }

    &__pinned {
      display: flex;
      padding-bottom: 0;
      overflow: unset;
      .PopoverContent__boxWrapper {
        display: flex;
        max-width: 20rem;
        flex: 1;

        &.pinned {
          flex-direction: column;
          overflow-y: auto;
          width: toRem(250px);
          .PopoverContent__box {
            overflow-y: unset;
          }
        }
        .PopoverContent__box {
          overflow-y: auto;
        }
        .PopoverContent__tagBox {
          overflow-y: hidden;
          max-width: toRem(200px);
        }
      }
      .PopoverContent__tagBox {
        overflow: hidden;
        .AttachedTagsList {
          max-height: calc(100% - 1.25rem);
          height: calc(100% - 1.25rem);
          position: relative;
          &__tags {
            max-height: 100%;
          }
          &__ControlPopover__anchor {
            position: absolute;
            right: 0;
            top: -1.875rem;
          }
        }
      }
    }

    &__boxContainer {
      display: flex;
      flex-direction: column;
      &.pinned {
        max-height: 100%;
        width: toRem(250px);
        overflow-y: auto;
        margin-bottom: toRem(1px);
      }
    }

    &__box {
      padding: 0.625rem 1rem;
    }

    &__valueContainer {
      display: flex;
      //align-items: center;
      margin-top: 0.4rem;
    }

    &__valueContainer:first-child {
      margin-top: 0;
    }

    &__value {
      margin-top: 0.25rem;
      word-break: break-word;
    }

    &__value:first-child {
      margin-top: 0;
    }

    &__headerValue {
      margin-left: 0.4rem;
    }

    &__axisValue {
      margin-top: $space-xxxxs;
      word-break: break-word;
    }

    &__contextValue {
      margin-left: 0.5rem;
      font-weight: $font-400;
    }

    &__runDetails {
      display: flex;
      align-items: center;

      .icon-link {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
      }
    }

    &__subtitle1 {
      color: $pico-50;
      text-transform: uppercase;
      font-weight: $font-500;
    }

    &__subtitle2 {
      font-weight: $font-600;
      text-transform: capitalize;
      color: $text-color;
      margin-top: 8px;
    }
  }
}
