import { token } from '@atlaskit/tokens';
import styled from '@emotion/styled';
import { keyframes } from '@emotion/react';

export const GRID_SIZE = 8;

export const BlinkerContainer = styled.span`
    position: relative;
`;

const blinkAnimation = keyframes`
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.3);
    }
`;

/* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
export const Blinker = styled.button`
    height: 22px;
    width: 22px;
    background: ${token('color.background.input')};
    border-radius: 50%;
    animation: ${blinkAnimation} 1s ease-in-out infinite;
    animation-direction: alternate;
    cursor: pointer;
    border: none;

    &:after {
        display: block;
        background: rgb(7, 71, 166, 0.8);
        position: absolute;
        height: 12px;
        width: 12px;
        content: '';
        left: 50%;
        top: 50%;
        margin: -6px 0 0 -6px;
        border-radius: 50%;
    }
`;

// AK doesn't provide a plain Table styled component.
// Using AK theme to be compatible with their dark mode.
// Styles copied from: https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/design-system/dynamic-table/src/styled/
export const Table = styled.table`
    border-collapse: collapse;
    width: 100%;
`;

export const HeadRow = styled.tr`
    border-bottom: 1px solid ${token('color.border')};
`;

export const HeadCell = styled.th`
    padding: ${GRID_SIZE / 2}px ${GRID_SIZE}px;
    border: none;
    color: ${token('color.text')};
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    text-align: left;
    vertical-align: top;
`;

export const TableRow = styled.tr`
    border-bottom: 1px solid ${token('color.border')};
    &:hover {
        background-color: ${token('color.background.neutral.subtle.hovered')};
    }
`;

export const TableCell = styled.td`
    border: none;
    padding: ${GRID_SIZE / 1.2}px ${GRID_SIZE}px;
    text-align: left;
`;

export const HeadingWrapper = styled.div`
    margin-top: 30px;
`;