import styled from 'styled-components'

import { AppLogo, CloseIcon } from '~/resources/icons'
import { ButtonLink } from '../ButtonLink'


export const HeaderContainer = styled.div`
  background: #e7e7e7;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0 8px;
  overflow: hidden;
  position: relative;
`

export const SegmentLogo = styled.div`
  width: 134px;
  background-image: url(${AppLogo});
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: left center;
`

export const BackToEventsButtonLink = styled(ButtonLink)`
  position: absolute;
  z-index: 1;
  right: 18px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 20px;
  width: 20px;
  background-image: url(${CloseIcon});
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
`

export const StyledButtonLink = styled(ButtonLink)`
  padding: 0;
  background: none;
  position: relative;
  height: 38px;
  width: 38px;

  & > * {
    transition: opacity 0.2s 0.2s;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: #f1f1f1;
    transform: scale(4) translate(2px, 12px) rotate(30deg);
    box-shadow: 6px 1px 7px 0px;
    pointer-events: none;
  }

  & ~ ${BackToEventsButtonLink}, &::after {
    opacity: 0;
    transition: all 0.15s;
  }

  &.active {
    & > * {
      transition: opacity 0.2s;
      opacity: 0;
    }

    & ~ ${BackToEventsButtonLink}, &::after {
      opacity: 1;
      transition: all 0.15s;
      pointer-events: all;
    }

    &::after {
      transform: scale(4) translate(2px, 10px) rotate(30deg);
    }
  }
`
