@import 'bootstrap/variables';
@import 'bootstrap/mixins/vendor-prefixes';
@import './animations';

@step: 20px;
@border-radius: 2px;
@color-bg: hsl(0, 0%, 15%);
@color-text: hsl(200, 40%, 60%);
@spin: 50%;

[class^=col-] {
  margin: 0 !important;
  padding: 0 !important;
  //outline: 3px solid red;
}

.ng-hide:not(.ng-hide-animate) {
//  display: block !important;
//  opacity: .3;
//  transform: translateX(-500px);
//  transition: 1s;
}

.shadow-mixin (@color) {
  box-shadow: 0 0 10px @color;
}
.text-shadow-mixin (@color) {
  text-shadow: 0 0 2px 10px @color;
}
.animation2(@animation, @animation2) {
  -webkit-animation: @animation, @animation2;
     -moz-animation: @animation, @animation2;
          animation: @animation, @animation2;
}
body {
  margin: @step;
  background-color: @color-bg;
  color: @color-text;
  font: @step/1.2 Arial, sans-serif;
  letter-spacing: .1px;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  overflow-y: scroll;
  // 3d
  perspective: 512px;
  perspective-origin: 50%; // dunno lol
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.container {
  position: absolute;
  left: 0;
  right: 0;
  top: @step;
//  bottom: 0;
  margin: auto;
  width: @step*30;
  height: 300px;
  opacity: 0;
  transition: .5s;
  .on & { opacity: 1; }
}
h1 {
  font-size: 24px;
  text-shadow: 0 0 3px @color-text, 0 0 10px @color-text;
}
section {
  width: 100%;
  margin: 0 0 @step;
  text-align: center;
  letter-spacing: @step/2;
  & > * { letter-spacing: .1px; }
}

button {
  position: relative;
  margin: 0 0 0 0;
  padding: @step/2 @step;
  &.big { padding: @step; }
  border: 1px solid @color-text;
  border-radius: @border-radius;
  background-color: fade(@color-text, 15%);
  transition: .4s;
  outline: none;
  .glyphicon {
    font-size: 10px;
    top: -2px;
  }
  &:hover {
    .shadow-mixin(@color-text);
    .animation2(rotation-y2 2.4s ease, opacity 2.4s ease);
    background-color: fade(@color-text, 30%);
    .scale(1);
  }
  &.active, &:active {
    border: 1px solid spin(@color-text, @spin);
    .shadow-mixin(spin(@color-text, @spin));
    color: spin(@color-text, @spin);
    background: fade(spin(@color-text, @spin), 15%);
  }
  .on & {
    .animation2(slide-from-top 1.4s ease, opacity 1.4s ease);
  }
}

input[type=search] {
  width: 100%;
  margin: 0;
  padding: @step;
  border-radius: @border-radius;
  border: 1px solid @color-text;
  .shadow-mixin(@color-text);
  color: @color-text;
  background: @color-bg;
  font-size: @step;
  transition: 4s;
  position: relative;
  opacity: 0;
  &:focus, .on & {
    opacity: 1;
    outline: none;
    border: 1px solid spin(@color-text, @spin);
    .shadow-mixin(spin(@color-text, @spin));
    color: spin(@color-text, @spin);
    background: fade(spin(@color-text, @spin), 15%);
    .animation(shift-left-to-right 1.4s ease);
  }
}

.list {
  width: 100%;
  margin: 0 0 @step;
  padding: @step;
  border: 1px solid @color-text;
  border-radius: @border-radius;
  .shadow-mixin(@color-text);
  background-color: fade(@color-text, 15%);
  font-family: monospace;
  text-align: center;
  position: relative;
  .animation2(slide-from-bottom 1.4s ease, opacity 1.4s ease);

  .list-item {
    transition: .1s;
  }
}

.hl {
  color: @color-bg;
  background-color: @color-text;
  box-shadow: 0 0 15px 4px @color-text;
  display: inline-block;
  border-radius: @border-radius;
}

.generate-char(@i) when (@i >= 0) {
  @char-color: spin(@color-text, @i * 20%);
  .char-@{i} {
    margin-left: 16px;
    transition: 1s;
    color: @char-color;
    .text-shadow-mixin(@char-color);
  }
  .on .char-@{i} {
    .animation(opacity 1s ease-in-out);
  }
  .generate-char(@i - 1);
}
.generate-char(0) {}
.generate-char(16);