/**
 * @author Will Steinmetz
 * 
 * Styles for the notific8 plug-in for jQuery
 * 
 * Copyright (c)2013, Will Steinmetz
 * Licensed under the BSD license.
 * http://opensource.org/licenses/BSD-3-Clause
 */

// compass includes
@import "compass/css3/transform";

// mixins
@mixin theme($name, $border-color, $background-color, $close-background-color: $border-color, $text-color: #fff, $close-text-color: $text-color) {
  .jquery-notific8-notification.#{$name} {
    border-color: $border-color;
    background-color: $background-color;
    color: $text-color;
    .jquery-notific8-close, .jquery-notific8-close-sticky {
      background-color: $close-background-color;
      color: $close-text-color;
    }
  }
}

// definitions
.jquery-notific8-container {
  display: block;
  padding: 0;
  margin: 0;
  position: fixed;
  &.top {
    top: 0;
    &.right {
      right: 0;
    }
    &.left {
      left: 0;
    }
  }
  &.bottom {
    bottom: 0;
    &.right {
      right: 0;
    }
    &.left {
      left: 0;
    }
  }
}

.jquery-notific8-notification {
  position: relative;
  display: none;
  padding: (10em/16);
  color: #fff;
  height: (66em/16);
  max-height: (66em/16);
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  width: (343em/16);
  &:hover {
    .jquery-notific8-close {
      display: block;
    }
  }
}

.jquery-notific8-heading {
  font-weight: bold;
  margin-bottom: (5em/16);
}

.jquery-notific8-message {
  font-size: (14em/16);
}

.jquery-notific8-close {
  position: absolute;
  padding: 0 0.25em;
  cursor: pointer;
  top: 0;
  display: none;
}

.jquery-notific8-close-sticky {
  text-align: center;
  position: absolute;
  width: (89em/16);
  padding: (2em/16) 0;
  cursor: pointer;
  text-transform: uppercase;
  span {
    font-size: (10em/16);
  }
}

.right {
  .jquery-notific8-notification {
    float: right;
    clear: right;
    padding-right: (33em/16);
  }
  .jquery-notific8-close {
    right: -2px;
  }
  .jquery-notific8-close-sticky {
    top: (31em/16);
    right: (-38em/16);
    @include rotate(90deg);
  }
}

.left {
  .jquery-notific8-notification {
    float: left;
    clear: left;
    padding-left: (33em/16);
  }
  .jquery-notific8-close {
    left: -2px;
  }
  .jquery-notific8-close-sticky {
    top: (31em/16);
    left: (-38em/16);
    @include rotate(270deg);
  }
}

.top .jquery-notific8-notification {
  margin-top: (10em/16);
}

.bottom .jquery-notific8-notification {
  margin-bottom: (10em/16);
}