import styled from "styled-components";
import { Row } from "../grid";
export const HeaderCell = styled(Row) `
  position: relative;

  user-select: ${(props) => (props.sort ? "none" : "text")};

  .label {
    position: relative;

    display: flex;
    align-items: center;
  }

  .label:hover {
    cursor: ${(props) => (props.sort ? "pointer" : "auto")};

    .arrow-container:not(.disabled) {
      opacity: ${(props) => (props.sortActive ? 1 : 0.5)};
    }
  }

  .arrow-container {
    position: absolute;
    right: -16px;

    opacity: ${(props) => (props.sortActive ? 1 : 0)};

    &.disabled {
      opacity: ${(props) => (props.sortActive ? 0.5 : 0)};

      :hover {
        cursor: auto;
      }
    }
  }

  .additional-content {
    display: flex;
    align-items: center;

    position: absolute;
    z-index: 1;

    right: -28px;
  }
`;
export const Arrow = styled.div `
  width: 16px;
  height: 16px;
  transform: rotate(
    ${(props) => (props.direction === "up" ? "180deg" : "0deg")}
  );
`;
//# sourceMappingURL=styled.js.map