.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.no-transition {
  transition: none !important;
}

// Remove any hairline borders
.no-border:after {
  background: none !important;
}

.hide.hide.hide {
  display: none;
}


// Focus Outline
// --------------------------------------------------
// When a keydown event happens, from a tab key, then the
// 'key-input' class is added to the body element so focusable
// elements have an outline. On a mousedown or touchstart
// event then the 'key-input' class is removed.

:focus,
:active {
  outline: none;
}

.key-input {

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

  button:focus,
  [button]:focus {
    outline-offset: -2px;
    outline: 2px solid red;
  }

}


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

$backdrop-color:      #000 !default;

backdrop {
  position: absolute;
  z-index: $z-index-backdrop;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $backdrop-color;
  opacity: 0.01;
  display: block;
  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;
  opacity: 0;
  z-index: $z-index-click-block;
  transform: translate3d(-9999px, 0px, 0px);;

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

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


// Swipe Handle
// --------------------------------------------------

$swipe-handle-width:               20px !default;
$swipe-handle-top:                 70px !default;
$swipe-handle-bottom:              70px !default;

.swipe-handle {
  position: absolute;
  top: $swipe-handle-top;
  left: 0;
  bottom: $swipe-handle-bottom;
  width: $swipe-handle-width;
  z-index: $z-index-swipe-handle;

  //background: red;
  //opacity: 0.2;

  transform: translate3d(-999px, 0px, 0px);
  &.show-handle {
    transform: translate3d(0px, 0px, 0px);
  }
}


// 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';
  &:before {
    content: "\f44e";
  }
  font-size: 128px;
  color: #666666;

  animation: rotation 45s infinite linear;
}