@use '../../theme/mixins' as *;
@use '../../theme/v2Styles' as *;

.panelHeader {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: $inner-section-text-size;

  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .selected {
    min-width: max-content;
    color: $label-gray;
  }
}

.description {
  font-size: $inner-section-text-size;
  color: $label-gray;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.labels {
  font-size: $inner-section-text-size;
  display: flex;
  flex-direction: column;
  gap: $element-inner-spacing;
}

.label {
  color: $section-white;
}

.content {
  color: $secondary-text-gray;
  margin-left: $element-inner-spacing;
  font-size: $text-body-size;
}

.interfaceList {
  display: flex;
  flex-wrap: wrap;
  gap: $section-spacing;
  row-gap: $element-inner-spacing;

  .interface {
    @include action-link;
    font-size: $inner-section-text-size;
    white-space: nowrap;
  }

  .linkIcon {
    margin-left: $element-inner-spacing;
    display: inline-block;
    transform: rotate(45deg);
  }
}