@import "../base";
@import "./config";

.root {
  z-index: $z-index-higher;
  position: fixed;
  bottom: 0;
  left: $snackbar-horizontal-offset;
  right: $snackbar-horizontal-offset;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
  margin-top: $snackbar-vertical-offset;
  color: $snackbar-color;
  background-color: $snackbar-background-color;
  border-radius: $snackbar-border-radius;
  transition: all $animation-duration $animation-curve-default $animation-duration;
  &.accept .button {
    color: green;
  }
  &.warning .button {
    color: orange;
  }
  &.cancel .button {
    color: red;
  }
  &:not(.active) {
    transform: translateY(100%);
  }
  &.active {
    transform: translateY(0%);
  }
}

.icon {
  margin-right: $snackbar-vertical-offset;
}

.label {
  flex-grow: 1;
  font-size: $font-size-small;
}

.button {
  min-width: inherit;
  margin-top: - $snackbar-vertical-offset / 2;
  margin-bottom: - $snackbar-vertical-offset / 2;
  margin-right: - $snackbar-horizontal-offset / 2;
  margin-left: $snackbar-button-offset;
  color: white;
  > abbr {
    line-height: inherit;
  }
}