/*
 * Desplegar menúes sin javascript!
 * 
 * Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
 */

// Comenzamos con un input checkbox con la clase toggler
input.toggler {
  // Lo ocultamos pero todavía queremos que se le pueda dar foco con el
  // teclado
  opacity: 0;
  position: absolute;

  // Ocultamos el elemento colapsable
  & + label {
    &.top {
      top: 0
    }

    &.left {
      left: 0
    }

    &.right {
      right: 0
    }

    & + .toggled,
    .toggled {
      z-index: 10;
      visibility: hidden;
    }

    & + .toggled {
      &.fade {
        opacity: 0
      }

      &.collapsed {
        height: 0;
      }
    }
  }

  // Al tildar el input, mostramos el elemento
  &:checked + label {
    & + .toggled,
    .toggled {
      visibility: visible;
    }

    & + .toggled {
      &.fade {
        opacity: 1
      }

      &.collapsed {
        height: auto;
      }
    }

    &.btn {
      &,
      &:hover,
      &:focus,
      &:active {
        background-color: $redpink
      }
    }
  }

  & + label {
    border: none;
    outline: none;
    z-index: 11;
  }

  // Dar una guía visual de que estamos enfocando el input
  &:focus + label {
    outline: 1px dotted grey ;
  }
}