//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT
.ui-page {
  overflow: hidden;

  .ui-page-title {
    z-index      : 5;
    font-size    : 1em;
    line-height  : 1.25;
    background   : $page-title-bg;
    color        : $page-title-text;
    text-align   : center;
    border-bottom: 1px solid rgba($base-shadow-color,.25);
  }

  .ui-page-body {
    overflow: hidden;
    position: relative;
  }
}

.ui-section {
  overflow: hidden;
  position: relative;
}

.ui-content {
  position: relative;
  display : block;
}

.ui-icon {
  display        : inline-block;
  width          : 1em;
  height         : 1em;
  stroke-width   : 0;
  line-height    : 1;
  position       : relative;
  background-size: 100% auto;

  &:before {
    position: absolute;
  }

  svg {
    font-size     : 1em;
    pointer-events : none;
    display       : inline-block;
    width         : 100%;
    height        : 100%;
    padding       : 0.5px;
    stroke-width  : 0;
    line-height   : 1;
    color         : inherit;
    stroke        : currentColor;
    fill          : currentColor;
    vertical-align: top;
    pointer-events: none;
  }
}

.ui-loader {
  @include position(absolute, 0);
  background: rgba($black, .05);
  cursor    : wait;
  direction : ltr;
  z-index   : $z-index-splash;

  .ui-loader-el {
    box-shadow   : 0 0 5px 1px rgba($black,.1);
    @include position(absolute, 50% auto auto 50%);
    @include transform(translateX(-50%) translateY(-50%));

    background   : $white;
    overflow     : hidden;
    padding      : 0.25em;
    font-size    : 2rem;
    line-height  : 1;
    z-index      : $z-index-splash;
    border-radius: $base-border-radius;
  }

  &.ui-small .ui-loader-el {
    font-size: 1.5rem;
  }

  &.ui-large .ui-loader-el {
    font-size: 3rem;
  }
}