/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/system_messages_vars";
@import "../mixins";

.toast-container {
  position: fixed;
  top: $system-messages-margin-top;
  right: $system-messages-margin-right;
  height: auto;
  z-index: $system-messages-z-index;
  pointer-events: all;
}

.dlt-toast {
  @include box-shadow($system-messages-elevation);
  width: 17.5rem;
  background-color: $system-messages-color-background;
  padding: $system-messages-toast-padding;
  margin-bottom: $system-messages-toast-margin-bottom;
  z-index: $system-messages-z-index;
  animation: slide-up 0.4s ease;
  border-radius: $system-messages-border-radii;

  @keyframes slide-up {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.title-wrapper {
  display: flex;
  margin-bottom: $system-messages-title-margin-bottom;
}

.error-icon,
.info-icon,
.warn-icon,
.warning-icon,
.success-icon {
  font-size: $system-messages-icon-font-size;
  float: left;
  margin-right: $system-messages-icon-margin-right;
}

.error-icon, .error-icon:before {
  color: $system-messages-color-error;
}

.info-icon, .info-icon:before {
  color: $system-messages-color-info;
}

.warn-icon, .warn-icon:before, .warning-icon, .warning-icon:before  {
  color: $system-messages-color-warning;
}

.success-icon, .success-icon:before {
  color: $system-messages-color-success;
}

.toast-title {
  font-size: $system-messages-title-font-size;
  font-weight: $system-messages-title-font-weight;
  flex: 11;
}

.close-toast {
  color: $system-messages-color-text-interactive-muted;
  font-size: $system-messages-icon-font-size;
  cursor: pointer;
  width: 24px;
  height: 24px;
  line-height: 21px;

  border: var(--dlt-border-width-default, 1px) var(--dlt-border-style-default, solid) transparent;
  -webkit-box-shadow: inset 0px 0px 0px 1px transparent;
  -moz-box-shadow: inset 0px 0px 0px 1px transparent;
  box-shadow: inset 0px 0px 0px 1px transparent;
  outline: none;

  @include transition($close-time-transition $close-transition-effect);

  &::before{
    margin-left: -1px;
  }

  &:hover{
    border: var(--dlt-border-width-default, 1px) var(--dlt-border-style-default, solid) var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  -webkit-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  -moz-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  outline: none;
  }

  &:active{
    border: var(--dlt-border-width-default, 1px) var(--dlt-border-style-default, solid) var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  -webkit-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  -moz-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
  background: $system-messages-color-background-interactive-secondary-active;
  outline: none;
  color: $system-messages-color-text-interactive-primary;
  }
}

.toast-message {
  font-family: $system-messages-font-family;
  font-weight: $system-messages-font-weight;
  font-size: $system-messages-font-size;
  line-height: $system-messages-line-height;
  padding-left: $system-messages-toast-message-padding-left;
  padding-top: $system-messages-toast-message-padding-top;
  clear: left;
}

.show-toast-details,
.show-toast-details:focus {
  color: $system-messages-color-text-interactive-muted;
  background: $system-messages-color-background;
  margin-left: $system-messages-toast-details-margin-left;
  padding: 0;
  line-height: $system-messages-icon-toggle-font-size;
  cursor: pointer;
  border: none;
  display: inline-block;
  outline: none;
  font-family: $system-messages-font-family;
  font-size: $system-messages-font-size;
  font-weight: $system-messages-font-weight;


  .show-hide-icon {
    font-size: $system-messages-icon-toggle-font-size;
    float: left;
    color: $system-messages-icon-toggle-color;
  }
}

.buttons-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: $system-messages-buttons-margin-top;

  .dlt-button {
    margin-left: $system-messages-button-margin-left;
  }
}

.error-border {
  border-left: $system-messages-border-width $system-messages-border-style $system-messages-color-error;
}

.info-border {
  border-left: $system-messages-border-width $system-messages-border-style $system-messages-color-info;
}

.warn-border {
  border-left: $system-messages-border-width $system-messages-border-style $system-messages-color-warning;
}

.success-border {
  border-left: $system-messages-border-width $system-messages-border-style $system-messages-color-success;
}


/* Toast --End-- */

/* Modal --Start-- */
.modal-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: $system-messages-color-overlay;
  top: 0;
  left: 0;
  z-index: $system-messages-z-index;
  display: none;
}

.dlt-modal {
  @include box-shadow($system-messages-modal-elevation);
  width: 28rem;
  background-color: $system-messages-color-background;
  padding: $system-messages-modal-padding;
  margin-bottom: .375rem;
  position: relative;
  border-radius: $system-messages-border-radii;

  .toast-title {
    font-size: $system-messages-title-toast-font-size;
    line-height: $system-messages-line-height;
  }

  .toast-message {
    padding-top: 0.75rem;
    padding-left: 0;
    clear: left;
  }

  .buttons-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2.5rem;

    .sm-button {
      margin-right: .5rem;
    }
  }

  .close-modal {
    color: $system-messages-color-text-interactive-muted;
    font-size: $system-messages-icon-font-size;
    cursor: pointer;
    position: absolute;
    right: $system-messages-icon-close-position;
    top: $system-messages-icon-close-position;
  }


}

/* Modal --End-- */

/* Inline --Start-- */
.inline-container {
  position: fixed;
  top: 8.5rem;
  height: auto;
  z-index: $system-messages-z-index;
}

.dlt-inline {
  @include box-shadow($system-messages-elevation);
  width: 45rem;
  background-color: $system-messages-color-background;
  padding: $system-messages-inline-padding;
  margin-bottom: .375rem;
  position: relative;
  animation: fadeInOpacity 0.5s ease;
  border-radius: $system-messages-border-radii;

  @keyframes fadeInOpacity {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .toast-title {
    font-size: $system-messages-inline-font-size;
    line-height: $system-messages-inline-title-line-height;
    flex: 0;
  }

  .inline-message {
    font-size: $system-messages-font-size;
    line-height: $system-messages-inline-detail-line-height;
    padding-top: 0;
    padding-left: 6px;
    flex: 11;

    #countdown {
      float: right;
      margin-right: 22px;
    }
  }



  .buttons-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;

    .xs-button {
      margin-right: .5rem;
    }
  }

  .title-wrapper {
    margin-bottom: 0px;
    .buttons-wrapper {
      margin-top: 0px;
    }
  }

  .close-inline {
    color: $system-messages-color-text-interactive-muted;
    font-size: $system-messages-icon-font-size;
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 24px;
    height: 24px;
    line-height: 21px;
  
    border: var(--dlt-border-width-default, 1px) var(--dlt-border-style-default, solid) transparent;
    -webkit-box-shadow: inset 0px 0px 0px 1px transparent;
    -moz-box-shadow: inset 0px 0px 0px 1px transparent;
    box-shadow: inset 0px 0px 0px 1px transparent;
    outline: none;

    @include transition($close-time-transition $close-transition-effect);
  
    &::before{
      margin-left: -1px;
    }
  
    &:hover{
      border: var(--dlt-border-width-default, 1px) var(--dlt-border-style-default, solid) var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    -webkit-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    -moz-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    outline: none;
    }
  
    &:active{
      border: var(--dlt-border-width-default, 1px) var(--dlt-border-style-default, solid) var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    -webkit-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    -moz-box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    box-shadow: inset 0px 0px 0px 1px var(--dlt-buttons-color-interactive-primary-default, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));
    background: $system-messages-color-background-interactive-secondary-active;
    outline: none;
    color: $system-messages-color-text-interactive-primary;
    }

  }
}