@import "./variables.scss";

.alertBar {
  position: relative;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  height: 0;
  opacity: 0;
  transform: translateY(20px);
  margin: 0px;
  padding: 0 8px;
  z-index: -1;
  -webkit-box-shadow: $boxShadowConfig;
  -moz-box-shadow: $boxShadowConfig;
  box-shadow: $boxShadowConfig;
  transition-property: transform, opacity, min-height, height;
  transition-duration: 0.2s;
  transition-timing-function: ease;

  &:global(.default) {
    background-color: $default;
    color: $black;
  }

  &:global(.success) {
    background-color: $success;
  }

  &:global(.warning) {
    background-color: $warning;
  }

  &:global(.error) {
    background-color: $error;
  }

  .inner {
    display: flex;
    align-items: center;
    [class*="Icon"] {
      cursor: initial;
    }

    .message {
      font-size: 15px;
      padding: 10px 15px 10px 5px;
    }
  }

  &.active {
    height: auto;
    min-height: 30px;
    transform: translateY(0px);
    opacity: 1;
    margin: 12px 0;
    z-index: 1;
  }

  &Error {
    svg {
      g {
        fill: white;
      }

      circle {
        stroke: transparent;
      }
    }
  }

  &Warning {
    svg {
      g {
        fill: #fff;
        stroke: $warning;
      }
      path {
        fill: $warning;
      }
      circle {
        stroke: transparent;
      }
    }
  }

  &Success {
    svg {
      g {
        fill: #fff;
      }
      circle {
        stroke: transparent;
      }
    }
  }
}