Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
justify-content: center;
position: fixed;
left: 0;
top: 0;
z-index: 999;
`
const Container = styled.div`
background-color: white;
max-width: 600px;
align-self: center;
padding: 20px 30px;
`
const Header = styled.div`
${avantgarde("s11")};
margin-bottom: 10px;
text-transform: uppercase;
color: ${p => p.color};
`
Header.displayName = "Header"
export const Title = styled.h1`
${garamond("s30")};
margin-bottom: 15px;
`
Title.displayName = "Title"
const Description = styled.div`
${garamond("s19")};
max-width: 470px;
line-height: 1.1;
display: none;
}
}
`
const SectionToolMenu = styled.ul`
display: flex;
border: 2px solid black;
position: relative;
left: 0;
width: 100%;
overflow: hidden;
`
const SectionToolMenuItem = styled.li`
${avantgarde("s11")};
background: white;
height: 89px;
border-right: 1px solid ${color("black10")};
border-bottom: 1px solid ${color("black10")};
vertical-align: top;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
&:last-child {
border-right: none;
}
${props =>
props.isOpen &&
`
max-height: inherit;
`};
${props =>
props.isVisible &&
!props.isHero &&
`
padding-bottom: 40px;
`};
`
export const SectionToolIcon = styled.div`
${avantgarde("s13")};
position: relative;
cursor: pointer;
top: -6px;
opacity: 0;
transition: opacity 0.15s ease-out;
svg {
z-index: 1;
width: 40px;
height: 40px;
position: absolute;
left: -18px;
top: -13px;
}
path {
transition: fill 0.1s;