:host(us-detailed-info) {
  width: 100%;
  height: 100%;

  .detailed-info {
    height: 100%;

    &__loader {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    &__wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    &__container {
      .analysis-block {
        display: flex;
      }

      .info-block {
        margin-top: var(--space-outer-xs);

        .info-block__item {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          padding: var(--space-inner-l) 0;
          border-bottom: 1px solid var(--color-neutral-300);
          gap: var(--space-inline-m);

          .item-title {
            color: var(--color-text-1000);
            font: var(--text-p-m-light);
            white-space: nowrap;
            margin-right: auto;
          }

          .item-value {
            text-align: right;
            color: var(--color-text-1000);
            font: var(--text-p-m-heavy);
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
        }
      }
    }

    .extra-block {
      display: flex;
      flex: 1;
    }
  }

  .vertical-narrow,
  .vertical,
  .horizontal-small {
    display: flex;
    flex-direction: column;

    .detailed-info__wrapper {
      min-height: 0;
      padding-bottom: var(--space-inner-xl);
    }
  }

  .horizontal-medium,
  .horizontal-large {
    .detailed-info__wrapper {
      flex-direction: row;

      us-detailed-event-card,
      us-detailed-card {
        width: 100%;
        max-width: 288px;
      }

      .detailed-info__container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0px;
        max-width: calc(100% - 288px);
        border-left: 1px solid var(--color-neutral-300);

        .container__scroll {
          display: flex;
          flex-direction: column;
          height: 100%;
          width: 100%;
          min-height: 0;
          padding-bottom: var(--space-inner-xl);
        }
      }
    }
  }

  .horizontal-large {
    .detailed-info__wrapper {
      us-detailed-event-card,
      us-detailed-card {
        max-width: 348px;
        width: 100%;
      }

      .detailed-info__container {
        max-width: calc(100% - 348px);
        width: 100%;
      }
    }
  }
}