import styled, { keyframes } from 'styled-components';

import Colors from '../Colors';
import Sizes from '../Sizes';
import TextHelper from '../TextHelper';

export const HeaderTabs = styled.ul`
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid ${Colors.line};
  margin-top: ${Sizes.s5}px;

  li {
    display: inline-block;

    a {
      cursor: pointer;
      display: block;
      text-decoration: none;
      padding: 16px 25px;
      font-size: 16px;
      font-weight: 500;
      text-transform: uppercase;
      color: ${Colors.mongeral};
      transition: color 0.15s ease-in-out;
      font-family: ${TextHelper.fontVariant('medium')};

      &:hover {
        color: ${Colors.regalBlue};
      }
    }
  }
`;

export const Marker = styled.span.attrs({
  className: 'marker'
})<{ marked: { width: number; index: number; }}>`
  position: absolute;
  transition: all 0.15s ease-in-out 0s;
  width: ${({ marked }) => marked.width}px;
  height: 3px;
  background: ${Colors.mongeral};
  left: 0;
  bottom: 0;
  transform: translateX(${({ marked }) => marked.index}px);
`;

const fadeIn = keyframes`
  from {
    transform: translateY(15px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
`;

export const ActiveComponent = styled.div<{ fromHeader: string }>`
  animation: ${fadeIn} 0.5s linear;
`;