@import '../../styles/common.scss';

.interactive {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;

  .iconWrapper {
    display: grid;
    grid: 50px / 50px;
    place-items: center;

    .xIcon,
    .detIcon,
    .reIcon {
      height: 20px;
      width: 20px;

      path {
        stroke: var(--message-bar-toggle-color, $message-bar-toggle-color);
      }
    }

    .reIcon {
      height: 40px;
      width: 40px;
    }

    .detIcon {
      height: 30px;
      width: 30px;

      &.open {
        path {
          stroke: var(
            --message-bar-toggle-open-color,
            $message-bar-toggle-open-color
          );
        }
      }
    }
  }

  .closeIcon,
  .retryIcon,
  .detailsIcon {
    height: fit-content;

    cursor: pointer;

    &:hover {
      background-color: black;
      background-color: rgba($color: #ffffff, $alpha: 0.5);
    }
  }
}

.body {
  display: grid;

  padding: 20px;

  z-index: 10;

  font-size: 14px;
  background-color: var(--message-bar-bg-color, $message-bar-bg-color);

  max-height: 500px;
  overflow: auto;

  .textChild {
    line-height: 1.3rem;
    white-space: pre-wrap;
  }

  // error styling (default)
  &.hasError {
    border-bottom: solid 2px
      var(--message-bar-error-icon-bg-color, $message-bar-error-icon-bg-color);
  }

  // info styling
  &.hasInfo {
    border-bottom: solid 2px
      var(--message-bar-info-icon-bg-color, $message-bar-info-icon-bg-color);
  }

  // warning styling
  &.hasWarning {
    border-bottom: solid 2px
      var(
        --message-bar-warning-icon-bg-color,
        $message-bar-warning-icon-bg-color
      );
  }
}
