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

import { mediaMax, mediaMin } from '../../theme/mixins';

export const styleButtonHeader = css`
  text-align: center;
  border-radius: 22px;
  padding: 5px 20px;
  margin-left: 10px;
  margin-top: 5px;
  cursor: pointer;
  display: inline-block;
  box-sizing: content-box;
  overflow: hidden;
  white-space: nowrap;
  transition: all 150ms ease-out;
  ${props => props.theme.default.fonts.ubuntuBold};

  > svg {
    height: ${props => props.theme.default.fonts.sizes[5]};
  }
  
  span {
    margin-right: 10px;
  }
  
  &:hover {
    opacity: .9;
  }

  ${mediaMax.small(css`
    > span {
      display: none;
    }
  `)}
`;

export const MyAccountLink = styled.a`
  ${styleButtonHeader};
  border-color: ${props => props.theme.default.colors.white};
  border-width: 2px;
  border-style: solid;
  max-height: 35px;

  ${mediaMin.medium(css`
    width: 185px;
  `)}

  &,
  &:visited,
  &:not([href]):not([tabindex]) {
    &,
    &:hover {
      color: ${props => props.theme.default.colors.white};
    }
  }
`;

export const CallMeButton = styled.a`
  ${styleButtonHeader};
  border-color: ${props => props.theme.default.colors.white};
  border-width: 2px;
  border-style: solid;

  &,
  &:visited,
  &:not([href]):not([tabindex]) {
    &,
    &:hover {
      color: ${props => props.theme.default.colors.white};
    }
  }
`;

export const LinkHeader = styled.a`
  ${styleButtonHeader};
  background: ${props => props.theme.default.gradient.blue};
  color: ${props => props.theme.default.colors.white}!important;
  padding: 7px 21px;
  display: none;
  
  ${mediaMin.medium(css`
    width: 185px;
  `)}
  
  svg {
    path {
      fill: ${props => props.theme.default.colors.white};
    }
  }
`;