@use '../../scss/base/variables' as var;

.container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}

.textAndIconContainer {
  display: flex;
  gap: 8px;
}

span.iconStyles {
  align-items: flex-start;
}

.text {
  font-size: var(--font-size-14);
}

.buttonsContainer {
  display: flex;
  align-items: center;
  gap: 8px;
}

@mixin status-colors($color) {
  color: var(--#{$color});
  &:after {
    background-color: var(--#{$color});
  }
  &:hover,
  &:active {
    color: var(--#{$color});
  }
}

button.error,
a.error {
  @include status-colors(dark-red);
}
button.info,
a.info {
  @include status-colors(dark-blue);
}
button.warning,
a.warning {
  @include status-colors(dark-yellow);
}
button.success,
a.success {
  @include status-colors(dark-green);
}