@use '../../../../styles/_globals.scss' as *;

:host {
  display: block;
  position: relative;
  z-index: var(--z-banner);

  mat-progress-bar {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
  }
}

.content-wrapper {
  border: 1px 0 solid var(--divider-color);
  background-color: var(--banner-bg);
  box-shadow: var(--banner-shadow);
}

.inner-content-wrapper {
  max-width: var(--component-max-width);
  margin: auto;
  padding: var(--s2);
  padding-top: var(--s);
  padding-bottom: var(--s);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  @include mq(component) {
    // sync to task list padding
    padding-left: var(--s3);
    padding-right: var(--s3);
  }
}

.message-wrapper {
  display: flex;
  align-items: center;
  padding-top: var(--s);
  padding-bottom: var(--s);

  mat-icon {
    margin-right: calc(var(--s) * 1.5);
    min-width: 20px;

    :host-context([dir='rtl']) & {
      margin-right: 0px;
      margin-left: calc(var(--s) * 1.5);
    }

    //.isError & {
    //  color: var(--c-warn);
    //}
  }
}

.buttons {
  display: flex;
  align-items: center;
  margin-left: auto;

  :host-context([dir='rtl']) & {
    button {
      font-weight: bolder;
    }
  }
}

.motivational-img-wrapper {
  margin: auto;

  img {
    width: 100%;
    height: auto;
    max-height: 30vh;
    margin: auto auto var(--s);
    object-fit: cover;
  }
}
