@import '../colors';

.error-banner-container {
  padding: 16px;
  width: 100%;
  background: $color-N0;
  box-shadow: 0px 2px 8px rgba(48, 49, 53, 0.16);
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  background-image: url('https://s-light.tiket.photos/t/01E25EBZS3W0FY9GTG6C42E1SE/original/react-ui/2021/09/13/04efa77e-d0c7-45f4-823b-6720e6cc9cd6-1631522946955-be0d0f977ae04d0cd7549c6d5bcac467.svg');

  .tix-font {
    margin: 0;
  }

  .title-container {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .footer-container {
    display: flex;
    margin-top: 4px;

    .subtitle-container {
      width: 100%;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  .button-container {
    margin-top: auto;
  }
}