.detail {

  .wide {
    width: 100%;
  }

  label {
    color: var(--color-color-1);

    &:has(.wide) {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin: 1rem 0;
      align-items: flex-start;
    }
  }

  puff-textarea {
    display: flex;
    accent-color: var(--color-color-1);
    border: 2px solid var(--color-neutral-7);
    border-radius: var(--border-radius);
    color: var(--color-neutral-1);
    line-height: initial;
    padding: .3em .6em;
  }
}

.actions {
  display: flex;
  align-items: center;
  flex: 0 !important;

  &.delete-confirm {
    gap: 1rem;

    button.delete {
      display: initial;
    }

    button.tertiary {
      width: max-content
    }

    button.yes,
    button.no,
    span.confirmation {
      display: none;
    }
  }

  &.confirm {
    button.delete {
      display: none;
    }

    button.yes,
    button.no,
    span.confirmation {
      display: initial;
    }

    button.tertiary {
      margin-left: 1rem;
      width: max-content;
    }


    span.confirmation {
      margin: 0 1rem;
    }

    button.no {
      margin: 0 0 0 1rem;
    }
  }
}