@use 'src/styles/abstracts' as *;

.BoxFullViewPopover {
  &__container {
    display: flex;
    width: 100%;
    height: 100%;
    &__detail {
      padding: $space-unit;
      min-width: 20rem;
      max-height: inherit;
      position: relative;
      width: 20rem;
      box-shadow: 0 0.25rem 0.375rem rgb(144 175 218 / 20%);
      height: 100%;
      overflow: auto;
      &-section {
        margin-bottom: 2rem;
      }
      &__truncatedInfo {
        max-width: 13rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
      }
      h3 {
        margin-bottom: $space-xs;
        text-transform: capitalize;
      }
      &-close {
        text-align: right;
      }
      &-item {
        display: flex;
        align-items: center;
        height: 1.75rem;
        margin-bottom: $space-xxxxs;
        &__tags {
          overflow: auto;
          .Badge {
            margin-left: $space-xxs;
          }
        }
        &__badge {
          margin-left: $space-xxs;
        }
        &__withSpace {
          margin-right: $space-xs;
          margin-bottom: $space-xxxs;
        }
        .Icon__container {
          margin-right: $space-sm;
        }
      }
      &-group {
        margin-bottom: $space-xs;
        h4 {
          display: inline-block;
          margin-right: $space-xs;
          margin-bottom: $space-xxs;
        }
        &__item {
          max-width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          padding-bottom: $space-xxxxs;
          &__key {
            margin-right: $space-xs;
          }
        }
      }
    }
  }
  .MuiDialog-paperWidthSm {
    max-width: unset;
    width: 100%;
    height: 90%;
  }
}
