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


/* ========================================================================
   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; }


/* Based on the State of the Parent Element
 ========================================================================== */

/*
 * Mind that `display: none`, `visibility: hidden` and `opacity: 0`
 * remove the element from the accessibility tree and that
 * `display: none` and `visibility: hidden` are not focusable.
 *
 * The target stays visible if any element within receives focus through keyboard.
 */

/*
 * Remove space when hidden.
 * 1. Remove from document flow.
 * 2. Hide element and shrink its dimension. Can't use zero dimensions together
 *    with `overflow: hidden` it would remove it from the accessibility tree.
 * 3. Hide the single rendered pixel.
 * 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
 *    by screen readers and the visual tracking indicator of other assistive technologies.
 */

.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
    /* 1 */
    position: absolute !important;
    /* 2 */
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    /* 3 */
    clip-path: inset(50%) !important;
    /* 4 */
    white-space: nowrap !important;
}

/*
 * Keep space when hidden.
 * Hide element without shrinking its dimension.
 * Unfortunately, can't use `clip-path: inset(50%)` because hover won't work
 * if the element is positioned outside of the toggle box.
 */

.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }


/* Based on Hover Capability of the Pointing Device
 ========================================================================== */

/*
 * Hover
 */

/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
@media (hover: none) {
    .uk-hidden-touch { display: none !important; }
}

/* Hide if primary pointing device supports hover, e.g. mice. */
@media (hover) {
    .uk-hidden-notouch { display: none !important; }
}


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

@if(mixin-exists(hook-visibility-misc)) {@include hook-visibility-misc();}

// @mixin hook-visibility-misc(){}