import styled from 'styled-components';
import {rem} from '../style/function.style'

export const AnchorContainer = styled.div`
  .anchor-wrap{
    position:relative;
    height: ${rem(80)};
  }
`

export const AnchorUl = styled.ul`
  font-family: PingFangSC-Medium;
  height: ${rem(80)};
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 50;
  overflow: hidden;
  background-color: ${(props: any) => props.theme.backgroundColor};

  &.type-1{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  &.type-2{
    display: inline-block;
    white-space: nowrap;
  }

  &.type-3{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width:100%;
  }
  .nw-dark-mode &{
    background-color: ${(props: any) => props.theme.isDefaultTheme ? '#151515' : props.theme.backgroundColor};
  }
`
export interface Theme{
  focusImage: string;
  unfocusImage: string;
  color: string;
}

export const AnchorLi = styled.li<{
  theme: Theme
}>`
position: relative;
display: inline-block;
height: ${rem(80)};
line-height: ${rem(80)};
padding: 0;
border-bottom: .5px solid rgba(237, 237, 237, 0.5);
font-size: ${rem(32)};
text-align: center;
list-style: none;
.nw-dark-mode &{
  border-color: #333;
}
&.type-1{
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
&.type-2{
  padding: 0 ${rem(30)};
}
&.type-3{
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background: url(${(props: any) => props.theme.unfocusImage});
  background-repeat: no-repeat;
  background-size: cover;
}

a{
  display: block;
  width: 100%;
  height: 100%;
}
.indicator-name{
  color: ${(props: any) => props.theme.color};
  .nw-dark-mode &{
    color: ${(props: any) => props.theme.isDefaultTheme ? '#ccc' : props.theme.color};
  }
}
&.active{
  font-size: ${rem(36)};
  background: url(${(props: any) => props.theme.focusImage});
  background-repeat: no-repeat;
  background-size: cover;
}
&.active .line{
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 12%;
  width: 76%;
  height: 3px;
  border-radius: 2px;
  transition: all .4s;
  background-color: ${(props: any) => props.theme.activeColor};
}
&.active .indicator-name{
  transition: all .4s;
  color: ${(props: any) => props.theme.activeColor};
}
`