import styled from 'styled-components/macro';

import { color, other, shadow, typography } from '../../theme';

const leftPadding = 8;

export const StyledTabList = styled.div`
  display: flex;
  height: 32px;
  margin-left: -${leftPadding}px;
  padding-bottom: 16px;
  position: relative;

  &:before {
    background: ${color('ref/palette/gray/100')};
    border-radius: 2px;
    bottom: 16px;
    content: '';
    height: 2px;
    left: ${leftPadding}px;
    position: absolute;
    right: 0;
  }
`;

export const StyledPointer = styled.div`
  background: ${color('sys/color/primary/default')};
  border-radius: 2px;
  bottom: 16px;
  height: 2px;
  position: absolute;
  transition: left 0.5s ${other('sys/timing-function/smooth')},
    width 0.5s ${other('sys/timing-function/smooth')};
`;

export const StyledTab = styled.button`
  @mixin ${typography('sys/typography/body-strong')};

  align-items: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: ${color('sys/color/text/secondary')};
  cursor: pointer;
  display: flex;
  line-height: 32px;
  outline: none;
  padding: 0 ${leftPadding}px;

  &[aria-selected='true'] {
    color: ${color('sys/color/primary/default')};
    cursor: default;
  }

  &:disabled {
    color: ${color('sys/color/text/disabled')};
    cursor: not-allowed;
  }

  &:focus-visible {
    box-shadow: ${shadow('sys/shadow/focus')};
  }
`;

export const StyledTabPanel = styled.div`
  &:focus-visible {
    box-shadow: inset ${shadow('sys/shadow/focus')};
    outline: none;
  }
`;