@use "../config/variables";

.c-formulario {
  & {
    height: calc(100vh - (variables.$gap-container * 2));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  &__campo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: variables.$gap-caja variables.$gap-container;

    padding: variables.$padding-contenedor;

    border: variables.$border-contenedor solid variables.$border-color;
    border-radius: variables.$border-radius-contenedor;
  }

  &__titulo {
    grid-column-start: 1;
    grid-column-end: 3;

    font-size: variables.$fs-titulo-m;
  }

  &__label {
    font-size: variables.$fs-label;

    color: variables.$text-color-label;
  }

  &__input {
    & {
      width: 100%;
      padding: variables.$padding-input 0;

      font-family: variables.$font-family-numerica;
      font-size: variables.$fs-input;
      text-align: center;

      color: variables.$text-color-input;
      background-color: transparent;
      border: variables.$border-contenedor solid variables.$border-color;
      border-radius: variables.$border-radius-contenedor;
    }

    &:hover,
    &:focus {
      outline: 0;
    }

    &::placeholder {
      padding: 1rem;

      text-align: center;

      color: variables.$text-color-input;
    }

    &[type="number"]::-webkit-inner-spin-button,
    &[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &:invalid {
      box-shadow: 0 0 1rem red inset;
    }
  }

  &__selector {
    grid-column-start: 1;
    grid-column-end: 3;

    width: 100%;
    padding: 2rem 2rem;

    font-size: 3rem;
    font-family: variables.$font-family-numerica;
    font-size: variables.$fs-input;

    color: variables.$text-color-input;
    background: url("../assets/images/flecha.svg") no-repeat right 2rem top 50%,
      0 0 variables.$bg-color;
    border: 8px solid variables.$border-color;
    border-radius: 2rem;
    appearance: none;

    &:focus {
      outline: 0;
    }
  }

  &__option {
    font-size: 3rem;

    background-color: variables.$bg-color;
    border-radius: 8px;

    &:hover {
      color: variables.$bg-color;
      background-color: variables.$text-color-input;
    }
  }

  &__unidad-medida {
    font-size: variables.$fs-unidad-medida;
    letter-spacing: 2px;
  }

  &__imagen {
    position: absolute;
    z-index: 1;
    bottom: 14rem;

    &--bottom18rem {
        bottom: 18rem; 
    }
  }

  &__info {
    grid-column-start: 1;
    grid-column-end: 3;
    display: block;
    font-size: 2rem;
    color: #37c3ff;
  }
}
