@layer atoms {
  /* stylelint-disable no-descending-specificity, no-duplicate-selectors -- complex component with nested groups */
  /*-----------------------------------------------------------------------------
     Wrapper around select and dropdown icon
    ----------------------------------------------------------------------------*/
  .mobius-segment-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: var(--segment-border);
    border-radius: var(--radius-2);
    margin-bottom: var(--size-sm);

    /* Horizontal stack */
    &.--is-horizontal {
      flex-direction: row;
    }

    /* Margins around SegmentGroup */
    & .mobius-segment-group.gap-size-xs,
    &.gap-size-xs {
      margin: var(--size-xs);
    }

    & .mobius-segment-group.gap-size-s,
    &.gap-size-s {
      margin: var(--size-sm);
    }

    & .mobius-segment-group.gap-size-m,
    &.gap-size-m {
      margin: var(--size-md);
    }

    & .mobius-segment-group.gap-size-l,
    &.gap-size-l {
      margin: var(--size-lm);
    }

    & .mobius-segment-group.gap-size-xl,
    &.gap-size-xl {
      margin: var(--size-xl);
    }

    & .mobius-segment-group.gap-size-xxl,
    &.gap-size-xxl {
      margin: var(--size-xxl);
    }

    /* Groups of vertically attached elements */
    & > .mobius-segment {
      border: none;
      border-top: var(--segment-border);
    }

    &:not(.--is-horizontal) {
      & > .mobius-segment {
        &:first-child {
          border-top: none;
          border-radius: var(--radius-2);
        }

        &:not(:first-child):not(:last-child) {
          border-radius: 0;
          border-bottom: 0;
        }

        &:last-child {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      }
    }

    /* Groups of horizontally attached elements */
    &.--is-horizontal {
      & > .mobius-segment,
      & > .mobius-segment-group {
        border: none;
        border-radius: 0;
        border-left: var(--segment-border);
      }

      & > .mobius-segment:first-child,
      & > .mobius-segment-group:first-child {
        border-left: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      & > .mobius-segment:not(:first-child):not(:last-child) {
        border-right: 0;
        border-radius: 0;
      }

      & > .mobius-segment:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* Nested Groups: don't double up on borders */
    & .mobius-segment-group {
      border-top: none;
      margin-top: 0;
      margin-bottom: 0;
      flex: 1;

      & > .mobius-segment-group.--is-horizontal {
        border-radius: 0;
        border: 0;
        border-top: var(--segment-border);
        margin: 0;
      }

      &:not(.--is-horizontal)
        > .mobius-segment-group:not(.--is-horizontal)
        .mobius-segment:first-child {
        border-top: var(--segment-border);
      }
      /* NOTE: We may need a similar rule for horizontally
      nested Segments inside groups for a left border */
    }
  }

  .mobius-segment {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    border: var(--segment-border);
    border-radius: var(--radius-2);
    padding: var(--size-sm);

    /* Remove text margins from inner text atoms */
    & .mobius-text,
    & .mobius-text.--is-h1,
    & .mobius-text.--is-h2,
    & .mobius-text.--is-h3,
    & .mobius-text.--is-h4 {
      margin: 0;
    }

    & h1,
    & h2,
    & h3,
    & h4,
    & p {
      margin: 0;
    }

    & .mobius-text.--is-p {
      line-height: var(--font-size-lead);
    }

    /* Colours */
    &.subtle {
      background-color: var(--color-border-light);
    }

    &.grey {
      background-color: var(--color-background-light);
    }

    &.primary {
      background-color: var(--color-primary);
    }

    &.secondary {
      background-color: var(--color-secondary);
    }

    &.inverted {
      color: var(--color-text-inverted);
    }

    /* Last child inside a Segment should have no bottom margin */
    & .mobius-text-field:last-child,
    & .mobius-checkbox:last-child,
    & .mobius-radio-group:last-child,
    & .mobius-text-area:last-child,
    & .mobius-select__outer:last-child {
      margin-bottom: 0 !important;
    }

    /* Nested Groups inside Segments:
    make full width and remove bottom margin*/
    & .mobius-segment-group {
      width: 100%;
      margin-bottom: 0;
    }
  }

  /* Heading */
  .mobius-segment__heading {
    box-sizing: border-box;
    font-size: var(--font-size-regular);
    margin: 0;
    margin-bottom: var(--size-sm);
  }
}
