import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: ${(p) => p.theme.color.uiBackground02};
  border-radius: ${(p) => p.theme.radii.s};
  border: 1px solid ${(p) => p.theme.color.uiLine};
  padding: ${(p) => p.theme.spacing.s};
`;

const Title = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

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

const TagWrapper = styled.div`
  position: absolute;
  right: ${(p) => p.theme.spacing.s};
  top: ${(p) => p.theme.spacing.s};
`;

export { Wrapper, Title, Description, TagWrapper };
