packages/pass/components/Form/Field/Layout/FieldsetCluster.scss

   1 .pass-fieldset-cluster {
   2         --fieldset-cluster-icon-color: var(--interaction-norm);
   3
   4         transition: opacity 0.2s ease-in-out;
   5
   6         // Set min-width: 0 on the parent of the flexbox to enable text-ellipsis
   7         // and prevent content overflow. This allows the flex item to shrink to its
   8         // content size, which is especially helpful when the item has a fixed or
   9         // percentage-based width that causes issues with the Flexbox layout.
  10         min-inline-size: 0;
  11
  12         &--write {
  13                 --fieldset-cluster-icon-color: var(--field-placeholder-color);
  14         }
  15
  16         > * {
  17                 border: 1px solid var(--border-weak);
  18                 margin-block-start: -1px;
  19                 position: relative;
  20
  21                 &:first-child,
  22                 &:first-child::before {
  23                         border-start-start-radius: var(--border-radius-lg) !important;
  24                         border-start-end-radius: var(--border-radius-lg) !important;
  25                         border-end-start-radius: 0 !important;
  26                         border-end-end-radius: 0 !important;
  27                 }
  28
  29                 &:last-child,
  30                 &:last-child::before {
  31                         border-start-start-radius: 0 !important;
  32                         border-start-end-radius: 0 !important;
  33                         border-end-start-radius: var(--border-radius-lg) !important;
  34                         border-end-end-radius: var(--border-radius-lg) !important;
  35                 }
  36
  37                 &:only-child,
  38                 &:only-child::before {
  39                         border-radius: var(--border-radius-lg) !important;
  40                 }
  41         }
  42 }
  43
  44 .pass-fieldset-cluster textarea {
  45         min-block-size: 1.25rem;
  46 }