import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  background-color: ${(p) => p.theme.color.uiBackground03};
  padding: ${(p) => p.theme.spacing.s};
  border-radius: ${(p) => p.theme.radii.s};
  z-index: 98;
`;

const Text = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
`;

const IconWrapper = styled.div`
  width: ${(p) => p.theme.spacing.s};
  height: ${(p) => p.theme.spacing.s};
  margin-right: ${(p) => p.theme.spacing.xs};
`;

const ActionWrapper = styled.div`
  margin-left: auto;
`;

export { Wrapper, Text, IconWrapper, ActionWrapper };
