@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.delivery-settings-section {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-bottom: 1px solid $CAP_G07;
  border-left: 1px solid $CAP_G07;
  border-right: 1px solid $CAP_G07;
  border-radius: 0 0 0.25rem 0.25rem;
  margin-top: -0.125rem;
  padding: $CAP_SPACE_12 $CAP_SPACE_16;
  box-sizing: border-box;

  &--clickable {
    cursor: pointer;

    &:hover {
      background-color: $CAP_G08;
    }
  }

  &__content {
    flex-direction: column;
    align-items: flex-start;
    gap: $CAP_SPACE_04;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    max-width: 100%;
  }

  &__field-row {
    gap: $CAP_SPACE_04;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  &__label {
    flex-shrink: 0;
  }

  &__value {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;

    // Override cap-ui-library / ant-typography that may force wrapping
    &,
    .ant-typography,
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
  }

  &__chevron {
    flex-shrink: 0;
    color: $CAP_G01;
  }

}
