@import 'cdb-variables/colors';
@import 'cdb-variables/sizes';

.Notifier {
  position: relative;
  flex: 0 0 auto;
  margin: 0 -25px 0 -24px;
  overflow: hidden;
  border-top: 1px solid $cSecondaryLine;
  word-wrap: break-word;
  hyphens: auto;
  overflow-wrap: break-word;

  &.is-dark {
    border-color: #3A484E;
    background: $cMainBg;
  }

  &:empty {
    display: none;
  }

  .CDB-Loader {
    height: 1px;
  }
}

.Notifier-inner {
  position: relative;

  .is-dark & {
    border-color: #3A484E;
  }

  &:first-child {
    border-top: 0;
  }
}

.Notifier.is-dark {
  .Notifier-item {
    &::before {
      background: #3A484E;
    }

    &.Notifier-item--success::before {
      background: #9DE0AD;
    }

    &.Notifier-item--error::before {
      background: #F15743;
    }

    &.Notifier-item--warning::before {
      background: #F5A623;
    }
  }
}

.Notifier-item {
  display: flex;
  position: relative;
  margin: 0 $baseSize * 3;
  padding-top: 20px;
  padding-bottom: 20px;
  color: $cSecondaryText;

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 1px;
    background: $cSecondaryLine;
  }

  &.Notifier-item--success::before {
    background: #9DE0AD;
  }

  &.Notifier-item--error::before {
    background: #F15743;
  }

  &.Notifier-item--warning::before {
    background: #F5A623;
  }
}

.Notifier-item--success {
  margin-right: 0;
  margin-left: 0;
  padding: 20px $baseSize * 3;
  background: rgba(#9DE0AD, 0.12);
}

.Notifier-item--error {
  margin-right: 0;
  margin-left: 0;
  padding: 20px $baseSize * 3;
  background: rgba(#F15743, 0.12);
}

.Notifier-item--warning {
  margin-right: 0;
  margin-left: 0;
  padding: 20px $baseSize * 3;
  background: #FEFEDD;
}

.Notifier.is-dark {
  .Notifier-item--success,
  .Notifier-item--error,
  .Notifier-item--warning {
    background: none;
  }
}

.Notifier .CDB-Loader {
  display: none;
}

.Notifier .CDB-Loader.is-visible {
  display: block;
}

.Notifier-info {
  flex: 1;
  min-width: 0; // To prevent firefox screw up
  padding-right: $baseSize * 2;
}

.Notifier-actions {
  margin-left: $baseSize * 3;

  &:first-of-type {
    margin-left: 0;
  }
}

.Notifier-icon {
  margin-top: 1px;
}