@use "../utilities";
.indexComponentsElement[data-ice-158312] {
  position: relative;
  top: -3rem;
  .indexComponents {
    min-height: 200px;
    border-radius: 3px;
    border: solid 0.5px var(--a-azul-unops);
    background-color: var(--a-blanco);
    .indexTitle {
      @extend %VFSans-font;
      font-size: 22px;
      font-weight: 600;
      color: var(--a-azul-unops);
      border-bottom: solid 1px rgba($color: #004976, $alpha: 0.41);
    }
    .groupLinks {
      &__item {
        pointer-events: none;
        &--link {
          pointer-events: auto;
          @extend %VFSans-font;
          font-size: 20px;
          font-weight: 600;
          line-height: 1.4;
          color: var(--b-medianoche);
        }
        &:hover {
          &::before,
          .groupLinks__item--link {
            color: var(--yellow-orange);
          }
          &::before {
            content: "\2022";
            font-size: 14px;
            font-weight: 600;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
          }
        }
      }
    }
  }
}

.indexFloating {
  position: fixed;
  z-index: 100000000;
  top: 20%;
  width: 50px;
  border-radius: 3px;
  border: solid 0.5px var(--a-azul-unops);
  background-color: var(--a-blanco);
  display: none;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  &__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--a-azul-unops);
  }
  .iconIndex {
    margin-right: 0.2rem;
  }
  &__content {
    position: relative;
    padding: 0.5rem 0;
    display: none;
  }
  &:hover {
    width: auto;
    height: auto;
    align-items: center;
    .indexFloating__content {
      display: block;
    }
    img {
      display: none;
    }
  }
  .indexTitle {
    @extend %VFSans-font;
    font-size: 18px;
    font-weight: 600;
    color: var(--a-azul-unops);
    border-bottom: solid 1px rgba($color: #004976, $alpha: 0.41);
  }

  .groupLinks {
    &__item {
      pointer-events: none;
      &--link {
        pointer-events: auto;
        @extend %VFSans-font;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--b-medianoche);
      }
      &:hover {
        &::before,
        .groupLinks__item--link {
          color: var(--yellow-orange);
        }
        &::before {
          content: "\2022";
          font-size: 14px;
          font-weight: 600;
          display: inline-block;
          width: 1em;
          margin-left: -1em;
        }
      }
    }
  }
}