@import (reference) '../variables.less';

@gutter: 15px;
@icon: 16px;

.status {
  @offset: 50%;
  position: absolute;
  left: @offset;
  transform: translateX(-@offset);
  top: @grid * 5;
  height: @grid * 8;
  border-radius: @radius-large;
  padding: 0 @gutter;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: @transition-fast;
  max-width: calc(100vw - @toolbar-item-size - (@code-gutter-size * 2));

  &.dismissable {
    padding-right: (@gutter * 2 + @icon);
  }

  &:not(.show) {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-@offset, -10px, 0);
  }

  &.positive {
    background-color: @positive-light;
  }
  &.critical {
    background-color: @critical-light;
  }
}

.dismiss {
  display: flex;
  position: absolute;
  right: @gutter;
  height: @icon;
  width: @icon;
  padding-left: @gutter;
  cursor: pointer;
  transition: @transition-fast;

  &:not(:hover) {
    opacity: 0.4;
  }
}