@value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
@value (sizeFluid) from '../../styles/variables/_size.css';
@value (spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';

.wrapper {
  display: flex;
  width: sizeFluid;
  align-items: center;
  justify-content: space-between;
  padding: spaceMedium spaceMedium;
  gap: spaceXSmall;
  background: colorBackgroundTertiary;
}

.top {
  composes: borderBottomPrimary from '../../styles/border.module.css';
}

.bottom {
  composes: borderTopPrimary from '../../styles/border.module.css';
}

.leftSlot,
.rightSlot {
  display: flex;
  align-items: center;
  gap: spaceSmall;
}