@import '~scss/variables';
@import '~scss/mixins';

.reason {
  display: inline-block;
  @include ellipsis;

  & > span {
    display: inline-block;
    vertical-align: middle;

    &:first-child {
      margin-right: 4px;
    }
  }

  :global {
    .tooltip {
      max-width: 320px;
    }
  }
}

.condition {
  .title {
    @include TypographySymbolText(#fff);

    & > span {
      display: inline-block;
      vertical-align: middle;

      &:first-child {
        margin-right: 4px;
      }
    }
  }

  & + .condition {
    margin-top: 8px;
  }
}

.warning {
  color: $yellow-color04;
}

.error {
  color: $red-color04;
}
