/* APP */
%appMount {
  background: cv('bg.app.overlay');
}
%shakeable,
body {
  background: transparent;
}
%bg {
  background: cv('bg.app.img') cv('bg.app.pos') / cv('bg.app.size') cv('bg.app.repeat') cv('bg.app.attach');
  @include filters(cv('bg.app'));
  z-index: -9999;
}
%appMount {
  %layers,
  %layer {
    background: transparent;
  }
}
%containerMain {
  %base {
    border-radius: 0;
  }
}
%backdrop {
  background: cv('bg.backdrop.overlay') !important;
}

%loading {
  background-color: transparent;
  &:before,
  &:after {
    content: '';
    position: absolute;
    @include stretch;
    border: 3px solid transparent;
    border-radius: 50%;
    margin: auto;
    filter: drop-shadow(0 0 3px $main-color);
    animation: cv-spin 1s ease-in-out infinite;
  }
  &:before {
    height: 26px;
    width: 26px;
    border-left-color: $main-color;
    border-right-color: $main-color;
  }
  &:after {
    height: 16px;
    width: 16px;
    border-top-color: $main-color;
    border-bottom-color: $main-color;
    animation-direction: reverse;
  }
}

// FONT
body,
button,
input,
select,
textarea,
::placeholder {
  font-family: cv('font.main');
}

// SELECTION
::selection {
  background: $main-color;
  color: var(--text-normal);
}

// TAB FOCUS
%focusRing {
	box-shadow: 0 0 0 4px cv('colors.focus');
}
