import styled from "styled-components";
import { Row } from "../grid";
import { currentTheme } from "../../theme";
import { appendAlpha } from "../../util";
export const Wrapper = styled.div `
  position: relative;
  width: 100%;
  z-index: 2;
  box-sizing: border-box;

  .row-fix {
    width: unset;
    margin: unset;
  }
`;
export const Heading = styled(Row) `
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  background: #FFFFFF;
  padding: 0 20px;
  cursor: pointer;
`;
export const Body = styled.div `
  position: absolute;
  top: 76px;
  left: 0;
  max-height: 0;
  height: 0;
  width: 100%;
  transition: 0.2s;
  border-radius: 0 0 4px 4px;
  background: #FFFFFF;

  &.opened {
    max-height: 624px;
    height: unset;
  }
`;
export const Tabs = styled(Row) `
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 57px;
  border-top: 1px solid #CCDAE9;
  padding: 0 20px;
`;
export const Tab = styled.div `
  width: 75px;
  height: 27px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  border-radius: 4px;
  background: ${appendAlpha("#C4C4C4", 0.3)};
  font-family: Bold;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: ${currentTheme.colors.secondary};

  p {
    font-family: Bold;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: ${currentTheme.colors.secondary};
    margin: 0;
    padding: 0;
  }

  &.active {
    background: #CCDAE9;
    color: ${currentTheme.colors?.text};

    p {
      font-family: Bold;
      font-size: 14px;
      line-height: 18px;
      text-align: center;
      color: ${currentTheme.colors?.text};
      margin: 0;
      padding: 0;
    }
  }
`;
export const PairRow = styled(Row) `
  cursor: pointer;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  height: 64px;
  border-top: 1px solid #E2EBF4;

  &.last {
    border-bottom: 1px solid #E2EBF4;
  }
`;
//# sourceMappingURL=styled.js.map