import styled from "styled-components";

const ErrorItem = styled.li`
  display: flex;
  background-color: ${(p) => p.theme.colors.uiBackground02};
  border: ${(p) => `1px solid ${p.theme.colors.uiLine}`};
  padding: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.xxs};
  border-radius: ${(p) => p.theme.radii.s};
  flex-direction: column;

  &:last-child {
    margin-bottom: 0;
  }
`;

const ErrorHeader = styled.div`
  display: flex;
  width: 100%;
`;

const ErrorMessage = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  font-weight: 400;
`;

const ErrorActions = styled.div`
  display: flex;
  margin-left: auto;
  align-items: start;
  gap: ${(p) => p.theme.spacing.xxs};
  padding-left: ${(p) => p.theme.spacing.xs};
`;

const IconWrapper = styled.button<{ isDisabled?: boolean }>`
  width: ${(p) => p.theme.spacing.s};
  height: ${(p) => p.theme.spacing.s};
  svg {
    path {
      fill: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
    }
  }
`;

const ErrorContentWrapper = styled.div<{ isOpen: boolean }>`
  width: 100%;
  overflow: hidden;
  height: ${(p) => (p.isOpen ? "auto" : "0")};
  transition: height 1s ease-in-out;
`;

const ErrorContent = styled.div`
  display: flex;
  width: 100%;
  margin-top: ${(p) => p.theme.spacing.xxs};
`;

const ErrorContentActions = styled.div`
  display: flex;
  gap: ${(p) => p.theme.spacing.xxs};
`;

const ErrorContentText = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  margin-left: ${(p) => p.theme.spacing.s};
`;

export {
	ErrorItem,
	ErrorHeader,
	ErrorMessage,
	ErrorActions,
	IconWrapper,
	ErrorContentWrapper,
	ErrorContent,
	ErrorContentActions,
	ErrorContentText,
};
