@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '../tab/tab' as tab;
@use './section' as *;

.#{$prefix} {
  width: 100%;
  box-sizing: border-box;
  padding: spacing.semantic-variable(padding, vertical, spacious) spacing.semantic-variable(padding, horizontal, spacious);
  border-radius: radius.variable(base);
  background-color: palette.semantic-variable('background', base);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: spacing.semantic-variable(gap, calm);

  &__content {
    min-height: spacing.semantic-variable(size, container, small);
  }

  > .#{tab.$prefix}--horizontal.#{tab.$prefix}--main {
    padding: 0;
  }
}

.#{$group-prefix} {
  display: flex;
  flex-direction: column;
  gap: spacing.semantic-variable(gap, calm);

  &--horizontal {
    flex-direction: row;

    > * {
      flex: 1 1 0;
      min-width: 0;
    }
  }
}