import styled from "styled-components";

const BulkHeader = styled.div<{ isScrolling?: boolean }>`
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
  padding-inline: ${(p) => p.theme.spacing.m};
  background: ${({ theme }) => theme.color.uiBackground03};
  border-radius: ${({ theme }) => theme.radii.s};
  min-height: 40px;
`;

const BulkActionsWrapper = styled.div`
  display: flex;
  width: 100%;
  align-items: center;
`;

const BulkActions = styled.div`
  display: flex;
  button {
    margin-right: ${(p) => p.theme.spacing.xs};
  }
`;

const SelectAllCheckField = styled.span`
  width: ${(p) => p.theme.spacing.s};
  margin-right: ${(p) => p.theme.spacing.s};
`;

const Counter = styled.div`
  margin-left: auto;
  display: flex;
  align-items: center;
`;

const SelectedCount = styled.span`
  margin-right: ${(p) => p.theme.spacing.s};
  color: ${(p) => p.theme.color.textHighEmphasis};
  ${(p) => p.theme.textStyle.uiL};
  font-weight: ${(p) => p.theme.fontWeight.regular};
`;

const LoadingText = styled.span`
  margin-left: ${({ theme }) => theme.spacing.xs};
  color: ${({ theme }) => theme.color.interactive01};
  ${({ theme }) => theme.textStyle.uiButton};
`;

export { BulkActions, BulkActionsWrapper, BulkHeader, Counter, LoadingText, SelectAllCheckField, SelectedCount };
