import styled from "styled-components";
import { composeStyle as comp } from "../../util";
export const Wrapper = styled.table(({ theme: { mediaMobile, wrapperWidth, wrapperHeight, wrapperBackground, wrapperPadding, wrapperPaddingMobile, }, }) => `
  ${comp("width", wrapperWidth)}
  ${comp("height", wrapperHeight)}
  ${comp("background", wrapperBackground)}
  ${comp("padding", wrapperPadding)}
  @media (${mediaMobile}) {
    max-width: 100vw;
    ${comp("padding", wrapperPaddingMobile)}
  }
`);
export const Headers = styled.tr(({ theme: { mediaMobile, headersAlignItems, headersHeight, headersJustifyContentMobile, headersHeightMobile, headerBackground, headersBorderBot, headersPosition, headersTop, headersTopMobile, headersPadding, headersMargin, rowPaddingMobile, }, }) => `
  display: flex;
  transition: 0.5s ease-in-out;
  ${comp("align-items", headersAlignItems)}
  ${comp("height", headersHeight)}
  ${comp("background", headerBackground)}
  ${comp("border-bottom", headersBorderBot)}
  ${comp("padding", headersPadding)}
  ${comp("margin", headersMargin)}
  ${comp("position", headersPosition)}
  ${comp("top", headersTop)}

  @media (${mediaMobile}) {
    ${comp("justify-content", headersJustifyContentMobile)}
    ${comp("height", headersHeightMobile)}
    ${comp("padding", rowPaddingMobile)}
    ${comp("top", headersTopMobile)}
  }
`);
export const Header = styled.th(({ theme: { headerFontFamily, headerFontSize, headerColor, headerBackground, headerWidth, headerJustifyContent, headerLineHeight, }, colCount, }) => `
	display: flex;
  transition: 0.2s;
  position: relative;

  ${comp("font-family", headerFontFamily)}
  ${comp("font-size", headerFontSize)}
  ${comp("color", headerColor)}
	${comp("background", headerBackground)}
  ${comp("justify-content", headerJustifyContent)}
  ${comp("width", colCount ? `calc(100% / ${colCount})` : headerWidth)}
  ${comp("width", headerWidth)}
  ${comp("line-height", headerLineHeight)}
  :first-of-type {
    justify-content: flex-start;
  }
`);
export const Rows = styled.tbody((props) => `
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar-track {
    border-radius: 4px;
  }

  &::-webkit-scrollbar {
    width: 3px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(23, 146, 255, 0.3);
  }
`);
export const Row = styled.tr(({ theme: { rowHeight, rowWidth, rowFontFamily, rowFontSize, rowAlignItems, rowBorderBot, rowJustifyContent, rowPadding, rowMargin, rowCursor, }, }) => `
  display: flex;
  flex-direction: row;
  position: relative;

  ${comp("justify-content", rowJustifyContent)}
  ${comp("min-height", rowHeight)}
  ${comp("width", rowWidth)}
  ${comp("font-family", rowFontFamily)}
  ${comp("font-size", rowFontSize)}
  ${comp("align-items", rowAlignItems)}
  ${comp("border-bottom", rowBorderBot)}
  ${comp("padding", rowPadding)}
  ${comp("margin", rowMargin)}
  ${comp("cursor", rowCursor)}
}
`);
export const ProgressRow = styled.div(({ theme: { rowHeight, rowHeightMobile, progressRowColor, mediaMobile }, value, }) => `
    position: absolute;
    top: 0;
    left: 0;

    width: ${value};
    ${comp("height", rowHeight)}
    ${comp("background", progressRowColor)}

    @media (${mediaMobile}) {
      ${comp("height", rowHeightMobile)}
    }
  `);
export const Item = styled.td(({ theme: { itemColor, itemBorderBot, itemBackground, itemWidth, itemMargin, itemJustifyContent, }, colCount, withProgress, }) => `
  display: flex;
  ${comp("z-index", withProgress ? "1" : undefined)}
  ${comp("color", itemColor)}
  ${comp("border-bottom", itemBorderBot)}
  ${comp("background", itemBackground)}
  ${comp("margin", itemMargin)}
  ${comp("justify-content", itemJustifyContent)}
  ${comp("width", colCount ? `calc(100% / ${colCount})` : itemWidth)}
  ${comp("width", itemWidth)}
  :first-of-type {
    justify-content: flex-start;
  }
`);
//# sourceMappingURL=styled.js.map