@import "../globals.core";

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

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

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


:focus,
:active {
  outline: none;
}

.focus-outline {

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

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

  ion-input :focus {
    outline: none;
  }

}


// Focus Controls
// -------------------------------

focus-ctrl {
  position: fixed;

  input,
  button {
    position: fixed;
    top: 1px;
    left: -9999px;
    z-index: 9999;

    width: 9px;

    pointer-events: none;
  }
}


// Backdrop
// --------------------------------------------------

$backdrop-color:      #000 !default;

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-backdrop;
  display: block;

  width: 100%;
  height: 100%;

  background-color: $backdrop-color;
  opacity: .01;
  transform: translateZ(0);
}


// 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 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-click-block;
  display: block;

  opacity: 0;
  transform: translate3d(0, -100%, 0);
  transform: translate3d(0, calc(-100% + 1px), 0);

  // background: red;
  // opacity: .3;
}

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


// Loading Icon
// --------------------------------------------------

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

ion-loading-icon {
  display: flex;

  align-self: center;

  margin: auto;

  font-family: "Ionicons";

  font-size: 128px;
  color: #666;

  animation: rotation 45s infinite linear;

  &::before {
    content: "\f44e";
  }
}