/*
 * # Semantic - Nag
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

$type     = 'module';
$element  = 'nag';

@import '../../theme.config';


/*******************************
             Nag
*******************************/

.ui.nag {
  display: none;
  opacity: $opacity;
  position: $position;

  top: $top;
  left: 0px;
  z-index: $zIndex;

  min-height: $minHeight;
  width: $width;

  margin: $margin;
  padding: $padding;

  background: $background;
  box-shadow: $boxShadow;

  font-size: $fontSize;
  text-align: $textAlign;
  color: $color;

  border-radius: $topBorderRadius;
  transition: $transition;
}

a.ui.nag {
  cursor: pointer;
}

.ui.nag > .title {
  display: inline-block;
  margin: $titleMargin;
  color: $titleColor;
}


.ui.nag > .close.icon {
  cursor: pointer;
  opacity: $closeOpacity;

  position: absolute;
  top: $closeTop;
  right: $closeRight;

  font-size: $closeSize;

  margin: $closeMargin;
  color: $closeColor;
  transition: $closeTransition;
}



/*******************************
             States
*******************************/

/* Hover */
.ui.nag:hover {
  background: $nagHoverBackground;
  opacity: $nagHoverOpacity;
}

.ui.nag .close:hover {
  opacity: $closeHoverOpacity;
}


/*******************************
           Variations
*******************************/


/*--------------
     Static
---------------*/

.ui.overlay.nag {
  position: absolute;
  display: block;
}

/*--------------
     Fixed
---------------*/

.ui.fixed.nag {
  position: fixed;
}

/*--------------
     Bottom
---------------*/

.ui.bottom.nags, 
.ui.bottom.nag {
  border-radius: $bottomBorderRadius;
  top: auto;
  bottom: $bottom;
}

/*--------------
     White
---------------*/

.ui.inverted.nags .nag, 
.ui.inverted.nag {
  background-color: $invertedBackground;
  color: $darkTextColor;
}
.ui.inverted.nags .nag .close, 
.ui.inverted.nags .nag .title, 
.ui.inverted.nag .close, 
.ui.inverted.nag .title {
  color: $lightTextColor;
}


/*******************************
           Groups
*******************************/

.ui.nags .nag {
  border-radius: $groupedBorderRadius !important;
}
.ui.nags .nag:last-child {
  border-radius: $topBorderRadius;
}
.ui.bottom.nags .nag:last-child {
  border-radius: $bottomBorderRadius;
}

loadUIOverrides();
