@use "../config/variables";
@use "../tools/mixins";

.info-aforo {
  & {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: variables.$gap-container;
    grid-template-areas:
      "aviso aviso"
      "cupos-disponibles cupos-disponibles"
      "maxima-capacidad  ocupacion-actual";
    overflow: hidden;
  }

  &__item-aviso {
    grid-area: aviso;
  }

  &__item-cupos-disponibles {
    grid-area: cupos-disponibles;
  }

  &__item-ocupacion-actual {
    grid-area: ocupacion-actual;
  }

  &__item-ocupacion-maxima {
    grid-area: ocupacion-maxima;
  }

  &__funcion {
    margin-left: 1rem;
    overflow: hidden;
  }

  &__descripcion {
    font-size: 2rem;
    transform: translateX(-1rem);
    animation: desaparicion 2s forwards;
  }

  &__contenedor-botones {
    position: absolute;
    left: 0;
    bottom: 1rem;
    z-index: 1;
  }

  &__botones {
    display: flex;
    flex-direction: row;
    width: 100vw;
    padding: 0 4rem;
  }
}

.union {
  display: flex;
  flex-direction: row;
}
