/*!
  *  Copyright (C) 2021 Robert Bosch GmbH Copyright (C) 2021 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */
@use 'sass:math';
@import '@bci-web-core/common-styles/sass/bci/bci-variables';
@import '@bci-web-core/common-styles/sass/bci/mixins';

.bci-banner-wrapper {
  transition: all 500ms;
  min-height: 0;

  &.has-banner {
    min-height: $grid-size * 7;
  }

  &.notification-success {
    background-color: $boschGreen90;
  }

  &.notification-information {
    background-color: $boschBlue90;
  }

  &.notification-warning {
    background-color: $boschYellow90;
  }

  &.notification-error {
    background-color: $boschRed90;
  }
}

.bci-portal-banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  @include make-responsive-banner-padding();
  align-items: center;
  min-height: $grid-size * 3;

  .mat-icon {
    overflow: visible;
  }
}

.bci-portal-banner-text-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: calc(100% - 64px);
  color: $boschBlack;
  mat-icon {
    margin-right: $grid-size * 1.5;
    line-height: 24px;
  }

  .bci-portal-banner-text {
    @include make-font-regular($font-size-base, 1.5);
    min-height: 24px;
  }
}

.banner-link {
  color: $boschBlack;
  background-color: transparent;
  border: none;
  @include make-font-regular($font-size-base, $grid-size * 3);
  margin: 0px 0px 0px 16px;
  padding: 0px;
  white-space: nowrap;

  &:not(.disabled):hover,
  &:not(.disabled):focus {
    text-decoration: underline;
    outline: 0;
    cursor: pointer;
    color: $boschBlue50;
  }

  &:not(.disabled):active {
    text-decoration: underline;
    outline: 0;
    cursor: pointer;
    color: $boschBlue40;
  }

  &.disabled {
    color: $boschGray80;
  }
}

.close-button {
  padding: $grid-size * 1.5 0 $grid-size * 1.5 $grid-size * 1.5;
  margin-left: 16px;
  &:hover,
  &:focus {
    cursor: pointer;
  }
}

.bci-portal-button-container .button-link:first-child {
  margin-right: $grid-size * 2;
}

.bosch-ic-alert-success-filled {
  color: $boschSignalGreen;
}

.bosch-ic-alert-error-filled {
  color: $boschSignalRed;
}

.bosch-ic-info-i {
  color: $boschBlue50;
}

.bosch-ic-alert-warning-filled {
  color: $boschSignalYellow;
}

.bci-portal-button-container {
  height: 48px;
  display: flex;

  .close-button {
    display: inline-block;
  }
  .button-link {
    padding-right: 0;
  }
}
