//global styles
@import "inc.variables.php";
@import "inc.modalize.less";
@import "inc.generic.less";
@import "inc.flex-extend.less";
@import "inc.omniselect.less";

body {
  overscroll-behavior: none;
  transition: all 1s ease;
}

.hidden{
  display: none!important;
  position: absolute!important;
  z-index: -99999!important;
  pointer-events: none!important;
  opacity: 0!important;
}

.mh-0{
  min-height: 0!important;
}

[app-placeholder] {
  display: none;
}

@keyframes ani-inc-load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}

[inc-url] {
  ///
  // min-height: 3rem;
  position: relative;
  min-width: 2em;
  min-height: 2em;

  &:not(.inc-url-noeffect) {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: fade(@color-bg-primary, 70%)!important;
      border-radius: 3px;
      opacity: 0.7;
      transition: opacity 0.5s ease;
      color: white;
      z-index: 99999;
      box-shadow: inset 0 0 3rem 3rem @color-bg-primary;
    }

    &:after {
      content: '';
      position: absolute;
      display: block;
      width: 1.8em;
      height: 1.8em;
      margin: 0.2em;
      vertical-align: text-bottom;
      border: 0.25em solid @color-primary;
      border-top-color: @color-bg-primary;
      border-bottom-color: @color-bg-primary;
      border-radius: 50%;
      box-sizing: border-box;
      animation: ani-inc-load 1s linear infinite;
      top: ~"max(0px,calc(50% - 1rem))";
      left: ~"max(0px,calc(50% - 1rem))";
      transform-origin: center;
      z-index: 999999;
    }

    &:not(:empty):not(.loading) {
      &:after,
      &:before {
        pointer-events: none;
        opacity: 0;
      }
    }

    &:empty.loading{
      &::after{
        position: relative;
      }
    }
  }
}
@keyframes ani-document-ready-main {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
@keyframes ani-main-view {
  0% {
    transform: translateX(1rem);
    opacity: 0;
  }

  50% {
    transform: translateX(0);
  }

  100% {
    opacity: 1;
  }
}

.documentReadyVisible {
  opacity: 0;

  .documentReady & {
    animation-delay: 0.5s;
    animation-name: ani-document-ready-main;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
}

#page--wrap {

  width: 100vw;
  width: ~"calc(var(--vw, 1vw) * 100)";
  min-height: -moz-available;          /* WebKit-based browsers will ignore this. */
  min-height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  min-height: fill-available;
  min-height: 100vh;
  min-height: ~"calc(var(--vh, 1vh) * 100)";
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;

  #page--footer,
  #page--header {
    flex-grow: 0;
    flex-shrink: 0;
  }

  #page--body {
    flex-grow: 1;
    flex-shrink: 0;
  }
}

#main--view {
  padding-top: @nav-fixed-height;
  flex-grow: 1;

  > * {
    animation-name: ani-main-view;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;

    .mixin-loop (@i) when (@i < 20) {
      &:nth-child(@{i}) {
        animation-duration: @i * 0.1s + 0.2s;
      }
      .mixin-loop(@i + 1);
    }
    .mixin-loop(0);
  }
}

body.modalized{ ///
  overflow: hidden;
}

#app-modalize {///
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 12345678;
  background-color: rgba(136, 144, 163, 0.6);
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  pointer-events: all;

  &:not(.modalized) {
    opacity: 0;
    pointer-events: none;
  }
  .modalize--holder{
    display: none!important;
  }

  .modalize--container {
    margin: 0;
    opacity: 0;
    position: fixed;
    min-width: 20ch;
    max-height: ~"calc(var(--vh, 1vh) * 100 - 1rem)";
    max-width: ~"calc(var(--vw, 1vw) * 100 - 1rem)";
    overflow-y: auto;
    overflow-x: visible;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    border-radius: 0.3rem;
    background-color: white;
    padding: 1rem;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    top: 50%;
    left: 50%;
    transform-origin: left;
    transform: translate(-50%, -50%);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    &.shown {
      opacity: 1;
    }
    &:first-child {
      opacity: 1;
      z-index: 10;
      pointer-events: all;
      -webkit-box-shadow: 0 0.1rem 0.5rem 0 #404150;
      -moz-box-shadow: 0 0.1rem 0.5rem 0 #404150;
      box-shadow: 0 0.1rem 0.5rem 0 #404150;
    }
    &:not(:first-child) {
      pointer-events: none;
    }

    .mixin-loop (@i) when (@i > 1) {
      @chld: 10 - @i;
      &:nth-child(@{i}) {
        z-index: @chld;
        opacity: (@chld * 0.1) + 0.1;
        margin-top: 4.5rem - (@chld * 0.5);
        transform: scale(0.55 + (@chld * 0.05)) translate(-50%, -50%);
      }
      .mixin-loop(@i - 1);
    }
    .mixin-loop(10);
    &:nth-child(n+10) {
      opacity: 0;
      margin-top: 5rem;
      transform: scale(0.5) translate(-50%, -50%);
    }
    & > .modalize--close{
      font-weight: bolder;
      position: absolute;
      font-size: 200%;
      top: 0rem;
      right: 0rem;
      width: 3rem;
      height: 3rem;
      padding: 1rem;
      display: flex;
      line-height: 0;
      align-items: center;
      justify-content: center;
      background-color: #C3D72D;
      color: #5B5F62;
      text-decoration: none;
    }
  }
}


@keyframes ani-tabify-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
  }
}
@keyframes ani-tabify-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
  }
}

.tabify{
  display: flex;
  width: 100%;
  flex-direction: column;
  > .tabify--header{
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
    > a{
      box-sizing: border-box;
      color: gray;
      &:not(:last-child){
        margin-right: 0.5rem;
      }
      &.active{
        color: @color-primary;
      }
    }
  }
  > .tabify--body{
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: hidden;
    position: relative;
    >*{
      position: relative;
      flex-shrink: 0;
      width: 100%;
      order: 2;
      background-color: white;
      overflow: visible;
      transition: all 1s ease;
      opacity: 1;
      display: none;
      &.previous{
        z-index: 11;
        order: 1;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        display: block;
        height: 100%;
      }
      &.active{
        display: block;
        z-index: 22;
        order: 0;
        animation-duration: 0.3s;
        animation-timing-function: ease-in-out;
        position: relative;
        &.active-right{
          animation-name: ani-tabify-right;
        }
        &.active-left{
          animation-name: ani-tabify-left;
        }
      }
    }
  }
}

[lazy-img]{
  display: block;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  max-height: 0%;
  transition: all 0.5s ease;
  padding-top: 100%;
  overflow: hidden;
  &.lazy-img-contain{
    background-size: contain;
    padding-top: 100%;
  }
  &.lazy-img-sheet-v{
    padding-top: 141.42%;
  }
  &.lazy-img-sheet-h{
    padding-top: 70.70%;
  }
  &.lazy-img-3-2{
    padding-top: 66.65%;
  }
  &.lazy-img-2-3{
    padding-top: 150%;
  }
  &.lazy-img-16-9{
    padding-top: 56.25%;
  }
  &.lazy-img-9-16{
    padding-top: 177.75%;
  }
  &:after{
    content: '';
    position: absolute;
    background-color: #d3b107;
    .background-image(@logo-alt);
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 1s ease;
    transition-delay: 1s;
  }
  &.lazy-loaded{
    max-height: 10rem;

    &.lazy-img-noeffect:after{
      opacity: 0;
    }
    &:not(.lazy-img-noeffect):after{
      opacity: 0;
    }
  }
}

.card{
  &.card-tabs{
    .card-tab{
      position: relative;
      background-color: #efefef;
      ul{
        display: flex;
        list-style: none;
        padding: 0;
        padding-top: 0.1rem;
        margin: 0;
        li{
          height: 100%;
          display: flex;
          align-items: stretch;
          position: relative;
          padding: 0.2rem 0.5rem;
          // &:not(:first-child){
          //   margin-left: -0.5rem;
          // }
          &.selected{
            z-index: 2;
            background-color: white;
          }
          &:hover{
            &:not(.selected){
              z-index: 1;
              &,&::before,&::after{
                background-color: gray;
              }
            }
          }
        }
      }
    }
  }
  .card-header{
    background-color: white;
  }
}


.text-strikethrough{
  text-decoration: line-through;
}

table{
  tr{
    &.tr-active{
      *{
        color: @color-primary;
      }
    }
    &.tr-disabled{
      opacity: 0.5;
    }
  }
}

@import "default.less";
@import "app.less";