import styled from "styled-components";

const ModalContent = styled.div`
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
`;

const ItemRow = styled.div<{ removeBorder?: boolean }>`
  display: flex;
  ${(p) => p.theme.textStyle.uiM};
  color: ${(p) => p.theme.color.textHighEmphasis};
  height: ${(p) => p.theme.spacing.l};
  border-bottom: ${(p) => (p.removeBorder ? "none" : `1px solid ${p.theme.color.uiLine}`)};
`;

const ItemTitle = styled.div`
  display: flex;
  font-weight: 600;
  align-items: center;
  width: 110px;
  flex-shrink: 0;
`;

const ItemContent = styled.div`
  display: flex;
  align-items: center;
`;

const Event = styled.div`
  align-items: center;
  font-weight: 600;
  color: ${(p) => p.theme.colors.textMediumEmphasis};
`;

const EventContent = styled.span`
  margin-left: ${(p) => p.theme.spacing.xxs};
  color: ${(p) => p.theme.colors.interactive01};
  flex-basis: 100%;
`;

const ActionWrapper = styled.div`
  margin-top: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.xs};
  button {
    background-color: transparent;
    width: 100%;
    svg {
      left: 0;
    }
  }
`;

export { ModalContent, ItemRow, ItemTitle, ItemContent, ActionWrapper, Event, EventContent };
