trampa-frontend/src/components/Prices/PricesHeader/PricesHeader.styled.js

import { Box, Link, Typography } from "@mui/material";
import styled from "styled-components";
import selectedTheme from "../../../themes";
import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";

export const PricesHeaderTitle = styled(Typography)`
  font-family: ${selectedTheme.fonts.textFont};
  font-style: normal;
  font-weight: 700;
  font-size: 72px;
  line-height: 98px;
  color: ${selectedTheme.colors.primaryPurple};
  display: flex;
  flex: 1;

  @media (max-width: 600px) {
    font-size: 36px;
    line-height: 49px;
  }
`;
export const PricesHeaderLine = styled(Box)`
  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
  width: 90px;
  margin-bottom: 26px;

  @media (max-width: 600px) {
    width: 54px;
  }
`;
export const PricesHeaderContainer = styled(Box)`
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
`;
// Below is display set to none because there is no currently function for this button,
// but it function may be added in future
export const ButtonContainer = styled(Link)`
  width: fit-content;
  cursor: pointer;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: ${selectedTheme.colors.primaryPurple};
  display: none;
`;
export const LinkText = styled(Typography)`
  border-bottom: 1px dotted ${selectedTheme.colors.primaryPurple};
  font-family: ${selectedTheme.fonts.textFont};
  line-height: 22px;
  font-size: 16px;
  color: ${selectedTheme.colors.primaryPurple};
  padding-bottom: 5px;
`;
export const Arrow = styled(ArrowButton)`
  transform: rotate(45deg);
`;