import styled from "styled-components";

const SectionHeader = styled.div`
  display: flex;
  justify-content: space-between;
  margin: 0 ${(p) => p.theme.spacing.m};
  margin-top: ${(p) => p.theme.spacing.m};
`;

const Title = styled.h1<{ isActive?: boolean }>`
  margin: 0;
  margin-right: ${(p) => p.theme.spacing.m};
  ${(p) => p.theme.textStyle.headingM};
  color: ${(p) => (p.isActive ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
`;

const HeaderIconsWrapper = styled.div`
  display: flex;
  align-items: center;
`;

const FilterSelectLabel = styled.span`
  color: ${(p) => p.theme.color.interactive01};
`;

const FilterSelect = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  line-height: 32px;
  display: flex;
  align-items: center;
  position: relative;
  color: ${(p) => p.theme.color.textLowEmphasis};
`;

export { SectionHeader, Title, HeaderIconsWrapper, FilterSelect, FilterSelectLabel };
