@import 'base';
@import 'app/app.less';


// variables
@black: #000;
@san-serif-stack: helvetica, arial;
@standard-fonts: ~'@{san-serif-stack}, sans-serif';

// mixins
.box-sizing (@sizing:border-box) {
  -ms-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  -webkit-box-sizing: @sizing;
  box-sizing: @sizing;
}

.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

.drop-shadow-2(
  @x-axis: 0,
  @y-axis: 1px,
  @blur: 2px,
  @alpha: 0.1
) {
  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

  .drop-shadow-3(
    @x-axis: 0,
    @y-axis: 1px,
    @blur: 2px,
    @alpha: 0.1) {
    -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  }

#drop {
  .shadow-3(
    @x-axis: 0,
    @y-axis: 1px,
    @blur: 2px,
    @alpha: 0.1) {
    -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  }
}

// styles

@keyframes grow-font-size {
    0% {
        font-size: .5em;
    }
    100% {
        font-size: 1em;
    }
}

#header {
  height: 35px;
  position: relative;
  background: lighten(@black, 40%);
  .drop-shadow(0, 2px, 4px, 0.4);
  .drop-shadow-2(
    0,
    2px,
    4px,
    0.4);
  .drop-shadow-3(
    0,
    2px,
    4px,
    0.4
  );
  .box-sizing;

  .btn.btn-large {
    padding: 6px 12px;
    float: left;
    background: spin(@black, 10%);
    font-weight: 300;
    animation: grow-font-size 1s;
    .box-sizing();

    &:hover {
      background: lighten(@black, 10%);
      filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{black}, endColorstr=@{black})";
    }
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .btn.btn-large {
    padding: 3px 6px;
  }
}
