import styled from "styled-components";

const Wrapper = styled.div`
  position: fixed;
  display: flex;
  background: ${(p) => p.theme.color.uiBackground04};
  justify-content: space-between;
  align-items: center;
  border: 1px solid ${(p) => p.theme.color.borderInverse};
  border-radius: ${(p) => p.theme.radii.s};
  z-index: 2000;
  bottom: ${(p) => p.theme.spacing.m};
  left: 50%;
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
  transform: translateX(-50%);
`;

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

  button {
    ${(p) => p.theme.textStyle.uiM};
    text-decoration: underline;
    font-weight: 600;
  }
`;

const IconWrapper = styled.div`
  width: ${(p) => p.theme.spacing.m};
  height: ${(p) => p.theme.spacing.m};
  margin-right: ${(p) => p.theme.spacing.xs};
  svg {
    path {
      fill: #dadada;
    }
  }
`;

const DismissButton = styled.button`
  background: none;
  border: none;
	svg {
		path {
			fill: ${(p) => p.theme.color.textHighEmphasisInverse};
		}
	}
  cursor: pointer;
  margin-left: ${(p) => p.theme.spacing.xs};
  display: flex;
  align-items: center;
`;

export { Wrapper, Text, IconWrapper, DismissButton };
