import styled from "styled-components";

const Label = styled.div<{ isOpen: boolean }>`
  position: relative;
  ${(p) => p.theme.textStyle.headingXXS};
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  padding-bottom: ${(p) => p.theme.spacing.xs};
  margin-bottom: ${(p) => p.theme.spacing.m};
  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
  cursor: pointer;
  :after {
    position: absolute;
    right: 10px;
    top: ${(p) => (p.isOpen ? `10px` : `6px`)};
    content: "";
    border: solid ${(p) => p.theme.color.interactive01};
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: ${(p) => (p.isOpen ? `rotate(-135deg)` : `rotate(45deg)`)};
  }
`;

const Content = styled.div<{ isOpen: boolean }>`
  overflow-y: ${(p) => (p.isOpen ? "visible" : "hidden")};
  max-height: ${(p) => (p.isOpen ? "auto" : 0)};
  transition: all 0.5s ease-in-out;
`;

const Wrapper = styled.div<{ isOpen: boolean }>`
  margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};

  &.filled {
    margin: ${(p) => `${p.theme.spacing.xs} 0`};
    background-color: ${(p) => p.theme.colors.uiBackground02};
    border: 1px solid ${(p) => (p.isOpen ? p.theme.color.interactive01 : p.theme.color.uiLine)};
    border-radius: ${(p) => p.theme.radii.s};
    padding: ${(p) => p.theme.spacing.s};

    ${Label} {
      ${(p) => (p.isOpen ? p.theme.textStyle.uiL : p.theme.textStyle.fieldContent)};
      text-transform: none;
      letter-spacing: normal;
      color: ${(p) => p.theme.colors.textHighEmphasis};
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    ${Content} {
      padding-top: ${(p) => p.theme.spacing.s};
      display: ${(p) => (p.isOpen ? "block" : "none")};
    }
  }
`;

export { Wrapper, Label, Content };
