%background {
  background-color: $background-default;
}

%transition {
  transition: $transition;
}

%shadow {
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}

%shadow-6 {
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !important;
}

%shadow-5 {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.1), 0 2px 10px 0 rgba(0,0,0,.1) !important;
}

%shadow-4 {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15)!important;
}

%shadow-3 {
  box-shadow: 0 3rem 3rem -1rem rgba(10,10,10,.2) !important;
}

%shadow-2 {
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

%shadow-1 {
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15) !important;
}

%eNimed {
  -webkit-animation-duration : 1s;
  animation-duration         : 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;

  &.infinite {
    animation-iteration-count: infinite !important;
    animation-duration       : 2s;
  }
}

%waves {
  position : relative;
  overflow : hidden;
  transform: translate3d(0, 0, 0);
}

%waves:after {
  content            : "";
  display            : block;
  position           : absolute;
  width              : 100%;
  height             : 100%;
  top                : 0;
  left               : 0;
  pointer-events     : none;
  background-image   : radial-gradient(circle, white 10%, transparent 0.01%);
  background-repeat  : no-repeat;
  background-position: 50%;
  transform          : scale(10, 10);
  opacity            : 0;
  transition         : transform 0.5s, opacity 1s;
}

%waves:active:after {
  transform : scale(0, 0);
  opacity   : 0.3;
  transition: 0s;
}

%waves-dark {
  @extend %waves;
}

%waves-dark:after {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.5) 10%, transparent 10.01%);
}

%waves-dark:active:after {
  opacity: 0.1;
}

%bg {
  background-size      : cover;
  background-repeat    : no-repeat;
  background-attachment: fixed;
  height               : 100%;
}

%centered {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  align-items    : center;
  vertical-align : middle;
}

%breadcrumb {
  margin     : 0;
  padding    : 0;
  align-items: center;
}

%e-breadcrumb {
  font-size    : $component-font-size;
  white-space  : nowrap;
  user-select  : none;
  padding      : $breadcrumb-padding;
  border-radius: $border-radius;

  & ol,
  & ul {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
    @extend %breadcrumb;
    align-items    : flex-start;
  }

  & li {
    display    : flex;
    @extend %breadcrumb;
    line-height: 2;
  }

  & li+li::before {
    color  : rgba(0,0,0,0.3);
    content: "\0002f";
  }

  & li.active {
    background: transparent !important;

    & a {
      color          : $gray;
      cursor         : default;
      pointer-events : none;
      text-decoration: underline;
    }
  }

  & li:first-child a {
    padding-left: 0;
  }

  & a {
    @extend %breadcrumb;
    color          : $primary;
    display        : flex;
    justify-content: center;
    padding        : 0 0.75em;

    &:hover {
      text-decoration: underline;
      color          : $gray;
      transition     : color 0.2s;
    }
  }

  & i,
  & span {
    margin-right: 0.5rem;
  }
}

%note-footer {
  justify-content: flex-end;
  display        : flex;
  flex-wrap      : wrap;
  padding        : 15px 10px;
  background     : rgba(255,255,255,.97);
  border-top     : solid 1px rgba(0,0,0,0.1);
}

%e-cap-fade {
  -webkit-animation-duration: 0.4s !important;
  animation-duration        : 0.4s !important;
}

%e-cap {
  @extend %e-cap-fade;
  @if $cap-enable-animation {
    @extend .eFade;
  }
  position        : fixed;
  top             : 0;
  left            : 0;
  bottom          : 0;
  right           : 0;
  z-index         : 9000;
  background-color: rgba(0,0,0,.4);
}
