@import "./ionic.globals";

.hide,
[hidden],
template {
  display: none !important;
}

.sticky {
  position: sticky;
  top: 0;
}


// Focus Outline
// --------------------------------------------------

$focus-outline-border-color:   #51a7e8 !default;
$focus-outline-border-width:   2px !default;
$focus-outline-box-shadow:     0 0 8px 1px $focus-outline-border-color !default;


:focus,
:active {
  outline: none;
}

.focus-outline :focus {
  outline: thin dotted;
  outline-offset: -1px;
}

.focus-outline button:focus,
.focus-outline [ion-button]:focus {
  border-color: $focus-outline-border-color;
  outline: $focus-outline-border-width solid $focus-outline-border-color;
  box-shadow: $focus-outline-box-shadow;
}

ion-input :focus {
  outline: none;
}


// Click Block
// --------------------------------------------------
// Fill the screen to block clicks (a better pointer-events: none)
// to avoid full-page reflows and paints which can cause flickers

.click-block {
  display: none;
}

.click-block-enabled {
  @include position(0, 0, 0, 0);
  @include transform(translate3d(0, -100%, 0), translateY(1px));

  position: absolute;

  z-index: $z-index-click-block;
  display: block;

  opacity: 0;

  contain: strict;
}

.click-block-active {
  @include transform(translate3d(0, 0, 0));
}