// Name:            Visibility
// Description:     Utilities to show or hide content on breakpoints, hover or touch
//
// Component:       `uk-hidden-*`
//                  `uk-visible-*`
//                  `uk-invisible`
//                  `uk-visible-toggle`
//                  `uk-hidden-hover`
//                  `uk-invisible-hover`
//
// ========================================================================


/* ========================================================================
   Component: Visibility
 ========================================================================== */

/*
 * Hidden
 * `hidden` attribute also set here to make it stronger
 */

[hidden],
.uk-hidden { display: none !important; }

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .uk-hidden\@s { display: none !important; }

}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

    .uk-hidden\@m { display: none !important; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .uk-hidden\@l { display: none !important; }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    .uk-hidden\@xl { display: none !important; }

}

/*
 * Visible
 */

/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {

    .uk-visible\@s { display: none !important; }

}

/* Phone landscape and smaller */
@media (max-width: @breakpoint-small-max) {

    .uk-visible\@m { display: none !important; }

}

/* Tablet landscape and smaller */
@media (max-width: @breakpoint-medium-max) {

    .uk-visible\@l { display: none !important; }

}

/* Desktop and smaller */
@media (max-width: @breakpoint-large-max) {

    .uk-visible\@xl { display: none !important; }

}


/* Visibility
 ========================================================================== */

.uk-invisible { visibility: hidden !important; }


/* Hover
 ========================================================================== */

/* Hidden */
.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-hidden-hover { display: none !important; }

/* Invisible */
.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-invisible-hover { visibility: hidden !important; }



// Hooks
// ========================================================================

.hook-visibility-misc;

.hook-visibility-misc() {}
