import { styled } from 'styleh-components'
import { H1, Label, LabelElement } from '@skava/ui/dist/components/atoms/Text'
import { Button } from '@skava/ui/dist/components/atoms/Button'
import { NavigationList, NavListStyledButton } from 'presets/NavigationList'
import { MultipleLinkList } from 'presets/MultipleLinkList'
import { StyledLink } from 'presets/SectionLinkList'

const MenuListWrapper = styled.div`
  background: -webkit-linear-gradient(180deg, #fffeff 50%, whitesmoke 50%);
  background: linear-gradient(-90deg, #fffeff 50%, whitesmoke 50%);
  /*background: -moz-gradient(180deg, #fffeff 50%, whitesmoke 50%);*/
`
const MenuListPanel = styled.div`
  background: white;
  display: grid;
  flex-direction: column;
  grid-template-columns: 200px auto 300px;
  max-width: 1200px;
  margin: auto;
`
const ListOfButtonWrapper = styled.div`
  background: var(--color-red);
`
const ListOfLinksGridWrapper = styled.div`
  background: white;
  padding: 15px 30px;
  display: grid;
  flex-direction: column;
`

const GridPanel = styled.div`
  ${H1} {
    font-size: 1rem;
    color: var(--color-black);
  }

  ${LabelElement} {
    font-size: 14px;
    color: var(--color-dark-grey);
  }
`

const ImageWrapper = styled.div`
  background: white;
`

const ViewAllText = styled.withComponent(Label)`
  text-transform: capitalize;
  font-size: 1rem;
  margin-bottom: 15px;
`

const NavigationListItem = styled.withComponent(NavigationList)`
  background: whitesmoke;

  ${NavListStyledButton}:hover {
    background: var(--color-blue);

    ${LabelElement} {
      color: var(--color-pure-white);
    }

    svg {
      display: none;
    }
  }
`

const StyledMultipleLinkList = styled.withComponent(MultipleLinkList)`
  ${StyledLink} {
    color: inherit;
    text-decoration: none;
  }
`

export {
  MenuListWrapper,
  MenuListPanel,
  ListOfButtonWrapper,
  ListOfLinksGridWrapper,
  GridPanel,
  ImageWrapper,
  ViewAllText,
  NavigationListItem,
  StyledMultipleLinkList,
}