@use "../config/variables";

.c-boton-desplegable {
  & {
    display: flex;
    align-items: center;
  }

  &__simbolo {
    cursor: pointer;

    &:hover {
      animation: girar360grados 1.5s forwards;
    }

    &--actualizar:hover * {
      fill: #74ff89; 
    }

    &--ayuda:hover * {
      fill: #37c3ff; 
    }

    &--cerrar:hover * {
      fill: #ff6c6c; 
    }
  }

  &__simbolo:hover + &__prueba>&__interpretacion {
    display: block;
    animation: desplazar-hacia-derecha 1.5s;
  }

  &__prueba {
    margin: 0 2rem 0 1rem;
    overflow: hidden;
  }

  &__interpretacion {
    display: none;
    color: white;
    font-size: 2rem;
    text-align: left;
  }
}

@keyframes girar360grados {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes girar360grados_invertido {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes desplazar-hacia-derecha {
  from {
    transform: translateX(-16rem);
  }
  to {
    transform: translateX(0rem);
  }
}

@keyframes desplazar-hacia-izquierda {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(-16rem);
  }
}
