@use "../../wc";

:host {
  display: block;
  container-type: inline-size;

  --zn-item-label-max-width: 450px;
}

.item {
  display: flex;
  flex-direction: row;
  padding: 0 var(--zn-spacing-medium);
  gap: var(--zn-spacing-2x-small);
  min-height: 35px;

  @include wc.container-query(null, md) {
    --zn-item-label-max-width: 220px;
  }

  @include wc.container-query(null, smp) {
    --zn-item-label-max-width: 180px;
  }

  @include wc.container-query(null, sm) {
    flex-direction: column;
    align-items: baseline;
  }

  &--has-icon {
    .item__icon {
      position: relative;
      line-height: var(--zn-line-height-loose);
      display: flex;
      justify-content: center;
      margin-right: var(--zn-spacing-small);
      color: rgb(var(--zn-text-heading));
    }
  }

  &--align-end .description-item__content {
    text-align: right;
  }

  &--align-center {
    align-items: center;
  }

  &__header {
    display: flex;
    align-items: center;

    .item__caption {
      width: unset;
      max-width: unset;
    }
  }

  &__headings {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  &--with-content &__headings {
    max-width: 45%;
    @include wc.container-query(null, sm) {
      max-width: unset;
    }
    width: var(--zn-item-label-max-width);
  }

  &__content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: var(--zn-line-height-loose);
  }

  &__content-inner {
    width: 100%;

    ::slotted(a) {
      color: rgb(var(--zn-primary)) !important;
    }

    ::slotted(zn-icon) {
      vertical-align: middle;
      margin-right: var(--zn-spacing-2x-small);
    }
  }

  &__caption {
    font-weight: 500;
    color: rgb(var(--zn-text-heading));
    line-height: var(--zn-line-height-loose);
    width: 100%;
    flex-shrink: 0;

    &--has-help {
      display: inline-flex;
      align-items: center;
      gap: var(--zn-spacing-2x-small);
    }

    &--required::after {
      content: var(--zn-input-required-content);
      margin-inline-start: var(--zn-input-required-content-offset);
      color: var(--zn-input-required-content-color);
    }
  }

  &__help-tooltip {
    color: var(--zn-color-neutral-700);
    font-size: var(--zn-font-size-small);
  }

  &__description {
    display: block;
    font-weight: 400;
    margin: var(--zn-spacing-2x-small) 0 0;
    font-size: var(--zn-font-size-small);
    color: rgb(var(--zn-text-color));
  }

  &__action-wrapper {
    display: inline-block;
    align-content: center;
  }

  &__actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-direction: row;
  }

  // Sizes
  &--small {
    &.item {
      padding: var(--zn-spacing-x-small);
    }

    .item__caption, .item__content-inner {
      font-size: var(--zn-font-size-small);
    }

    @include wc.container-query(null, sm) {
      gap: var(--zn-spacing-2x-small);
    }
  }

  &--stacked {
    flex-direction: column;
    align-items: baseline;
    gap: var(--zn-spacing-2x-small);
  }

  &--edit-on-hover {
    ::slotted(zn-inline-edit::part('actions')) {
      display: none;
    }

    .item__actions {
      display: none;
    }

    &:hover {
      ::slotted(zn-inline-edit::part('actions')) {
        display: flex;
      }

      .item__actions {
        display: flex;
      }
    }
  }

  &--inline {
    gap: var(--zn-spacing-small);

    .item__header {
      width: unset;
      max-width: unset;
    }

    .item__icon {
      margin-right: 0;
    }

    .item__caption {
      width: unset;
      max-width: unset;
    }

    .item__headings {
      width: unset;
      max-width: unset;
    }

    .item__description {
      margin: 0;
    }

    @include wc.container-query(null, sm) {
      flex-direction: row;
      align-items: center;
      gap: var(--zn-spacing-small);
    }
  }

  &--no-padding {
    padding: 0 !important;
  }

  &--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}