@import '../../styles/variables';
@import '../../styles/mixins';

.SuccessLabel {
  display: inline-flex;
  height: $line-height;
  padding: 0 16px;
  transition: opacity .5s ease;
  color: $white;
  border-radius: $border-radius;
  background: $success-color;
  line-height: $line-height;
  vertical-align: middle;
  opacity: 1;

  &__message {
    display: none;

    @media screen and (min-width: $layout-desktop) {
      display: inline-block;
    }
  }

  &__icon {
    @media screen and (min-width: $layout-desktop) {
      display: none;
    }
  }

  @media screen and (min-width: $layout-desktop) {
    max-width: 350px;
    white-space: nowrap;
  }

  &_fade {
    transition: 0.5s linear all;
    opacity: 0;
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(23, 135, 252, 0.4);
    }
    100% {
      box-shadow: 0 0 0 70px rgba(23, 135, 252, 0);
    }
  }
}