import { styled } from 'styleh-components'

const ToggleButton = styled.div `
  position: absolute;
  right: rem(12);
  top: rem(12);
  z-index: 2;

  display: flex;
  cursor: pointer;
`

const Wrapper = styled.section `
  position: relative;
  padding: rem(12);
  background: var(--color-pure-white);
  margin-bottom: rem(8);
  ${props =>
    props.isExpanded &&
    styled.css `
      box-shadow: 0 rem(4) rem(12) 0 rgba(0, 0, 0, 0.3);
    `};
`

export { ToggleButton, Wrapper }