import styled from "styled-components";
import { primary, gray } from "../../core/colors/colors";
import { fonts } from "../../styles/fonts";

export const TooltipButtonContainer = styled.div`
  position: relative;

  display: flex;
  justify-content: center;

  &:hover {
    span {
      display: block;
    }
  }
`;

export const TooltipButtonStyle = styled.button<{ stroke?: string }>`
  padding: 4px;

  border: 0;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #fff;

  cursor: pointer;

  &:hover {
    background-color: ${gray[100]};
  }

  svg {
    width: 16px;
    height: 16px;

    stroke: ${({ stroke }) => stroke || primary[500]};
  }
`;

export const Tooltip = styled.span`
  width: max-content;

  padding: 4px 8px;

  border-radius: 4px;

  display: none;

  color: #fff;
  background-color: ${gray[600]};

  ${fonts.tooltip}

  position: absolute;
`;
