@import '../../themes/default/modules/toast.variables';

@if $use-toast {
  /*******************************
  //@-    Toast container
  *******************************/

  .ui.toast-container {
      position: fixed;
      z-index: 9999;
  }

  .ui.top.right.toast-container {
      top: $toast-container-distance;
      right: $toast-container-distance;
      margin-left: $toast-container-distance;
  }

  .ui.top.left.toast-container {
      top: $toast-container-distance;
      left: $toast-container-distance;
      margin-right: $toast-container-distance;
  }

  .ui.top.center.toast-container {
      left: 50%;
      transform: translate(-50%, 0);
      top: $toast-container-distance;
  }

  .ui.bottom.right.toast-container {
      bottom: $toast-container-distance;
      right: $toast-container-distance;
      margin-left: $toast-container-distance;
  }

  .ui.bottom.left.toast-container {
      bottom: $toast-container-distance;
      left: $toast-container-distance;
      margin-right: $toast-container-distance;
  }

  .ui.bottom.center.toast-container {
      left: 50%;
      transform: translate(-50%, 0);
      bottom: $toast-container-distance;
  }

  /*******************************
              Toast
  *******************************/

  .toast {
      display: block;
      border-radius: $default-border-radius;
      padding: $toast-padding;
      margin: $toast-margin;
      color: $toast-text-color;
  }

  .floating.toast,
  .hoverfloating.toast:hover {
    box-shadow: $floating-shadow;
  }

  .hoverfloating.message:hover {
    box-shadow: 0 0 0 1px inset, $floating-shadow;
  }

  .center.toast-container .toast-box,
  .right.toast-container .toast-box {
      margin-left: auto;
  }

  .center.toast-container .toast-box {
      margin-right: auto;
  }

  .visible.toast-box,
  .animating.toast-box,
  .toast-box {
      display: table !important;
  }


  .toast-container .compact {
    display: block;
    width: $toast-width;
  }

  .toast-container .message,
  .toast:hover {
      opacity: $toast-opacity-on-hover;
      cursor: $toast-cursor-on-hover;
  }


  .icon.toast .content {
    padding-left: $toast-icon-content-padding;
  }

  .toast > .content > .header {
      font-weight: bold;
  }

  .info.toast {
      background-color: $toast-info-color;
  }

  .warning.toast {
      background-color: $toast-warning-color;
  }

  .success.toast {
      background-color: $toast-success-color;
  }

  .error.toast {
      background-color: $toast-error-color;
  }

  .toast-box .info.attached.progress .bar {
      background: $toast-info-progress-color !important;
  }

  .toast-box .warning.attached.progress .bar {
      background: $toast-warning-progress-color !important;
  }

  .toast-box .success.attached.progress .bar {
      background: $toast-success-progress-color !important;
  }

  .toast-box .error.attached.progress .bar {
      background: $toast-error-progress-color !important;
  }

  /*--------------
      Colors
  -------------- */

  @each $key, $value in $colors {
    @if(index(join($main-colors-names, $use-toast-variation-colors), $key+'')) {
      $color: $key;
      $c: map-get($value, color);
      $l: map-get($value, light);

      .#{$key + ""}.toast {
        background-color: $c;
      }
      @if($use-toast-variation-inverted) {
        .inverted.#{$key + ""}.toast,
        .toast-box .inverted.#{$key + ""}.attached.progress .bar {
          background-color: $l;
        }
      }
    }
  }

  @if($use-toast-variation-inverted) {
    .inverted.toast {
      color: $toast-inverted-text-color;
    }
  }
  /*--------------
        Icon
  ---------------*/

  .icon.toast > .icon:not(.close) {
      display: inline-block;
      vertical-align: $toast-icon-vertical-align;
      font-size: $toast-icon-font-size;
      position: absolute;
  }



  .icon.toast > .content {
      display: inline-block;
      vertical-align: $toast-content-vertical-align;
  }

  /*---------------
    Progress Bar
  ----------------*/

  .toast-box .attached.progress .bar {
      min-width: 0;
  }

  .toast-box .active.progress .bar:after {
    animation: progress-active 2s $default-easing infinite !important;
  }

  .toast-box {
      margin-bottom: $toast-margin-bottom;
  }

  .toast-box .toast,
  .toast-box .message {
      margin-top: 0;
      margin-bottom: 0;
      position: relative;
  }
  .toast-box .attached.progress{
      z-index:1;
  }

  .toast-box .bottom.attached.progress {
    margin: -3px 0 $toast-margin-bottom;
  }

  .toast-box .top.attached.progress {
    margin: $toast-margin-bottom 0 -3px;
  }

  /* --------
  Close Icon
  -----------*/

  .toast-box .message > .close.icon {
    top: $toast-close-top-distance;
    right: $toast-close-right-distance;
  }


  .toast-box .toast>.close.icon {
    cursor: pointer;
    position: absolute;
    margin: 0;
    top: $toast-close-top-distance;
    right: $toast-close-right-distance;
    opacity: $toast-close-opacity;
    transition: $toast-close-transition;
  }

  .toast-box .toast > .close.icon:hover {
    opacity: 1;
  }
}

@import '../../themes/default/modules/toast.style';