@import '../../../style/global-parameters.scss';

$labelWidth: 72px;

.gallery-common-item {
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;

  &.gallery-common-item-vertical {
    flex-direction: column;
    gap: var(--oio-padding-sm);
    .gallery-common-item-label {
      flex: auto;
      width: 100%;
    }
    .gallery-common-item-content {
      width: 100%;
      max-width: 100%;
    }
  }

  .gallery-common-item-label {
    flex: 1 0 $labelWidth;
    width: $labelWidth;
    color: var($parameterPrefix + -text-color-secondary);
    margin-right: 8px;
    font-size: var($parameterPrefix + -font-size-sm);
    padding-top: 5px;
    text-align: left;
    align-self: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gallery-common-item-content {
    flex: 1 0 100%;
    max-width: calc(100% - #{$labelWidth} - 8px);
    display: flex;
    align-items: center;
  }

  &.gallery-common-item-hide-label {
    .gallery-common-item-content {
      max-width: 100%;
    }
  }
}