.#{$n}-chat-status {
  display: flex;
  align-items: flex-start;
  gap: $spacer * 0.5;
  width: 100%;
  min-height: $buttonsize;
  margin: $spacer;
  padding: $spacer * 0.5;
  border-radius: $borderradius;
  background-color: $white;
  box-shadow: $boxshadow;

  &--condensed {
    align-items: center;
    padding: $spacer * 0.25 $spacer * 0.5 $spacer * 0.25 $spacer * 0.25;
  }
}

.#{$n}-chat--layout-window .#{$n}-chat-status {
  margin-right: $buttonsize + $spacer * 2;
}

.#{$n}-chat-status__body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: $spacer * 0.5;
  align-items: center;
  justify-content: flex-start;
}

.#{$n}-chat-status__title {
  display: flex;
  margin: 0;
  color: $grey-e;
  font-size: $fontsize-medium;
  font-weight: $fontweight-bold;
  line-height: 1.25;
}

.#{$n}-chat-status .#{$n}-icon {
  flex: 0 0 $iconsize-small;
  width: $iconsize-small;
  height: $iconsize-small;
}

.#{$n}-chat-status__button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: $buttonsize-small;
  padding: $spacer * 0.25 $spacer * 0.5;
  color: $white;
}

.#{$n}-chat-status__button .#{$n}-icon {
  svg {
    width: 100%;
    height: 100%;

    path {
      fill: $white;
    }
  }
}

.#{$n}-chat-status__close {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  min-width: $buttonsize-small - $spacer * 0.5;
  min-height: $buttonsize-small - $spacer * 0.5;
  color: $brand3;

  &:has(.#{$n}-icon) {
    flex: 0 0 $buttonsize-small - $spacer * 0.5;
    width: $buttonsize-small - $spacer * 0.5;
    padding: 0;
  }

  .#{$n}-icon {
    align-self: center;
  }
}