revite/src/components/ui/Header.tsx

import styled, { css } from "styled-components";

interface Props {
    borders?: boolean;
    background?: boolean;
    placement: 'primary' | 'secondary'
}

export default styled.div<Props>`
    gap: 6px;
    height: 48px;
    flex: 0 auto;
    display: flex;
    flex-shrink: 0;
    padding: 0 16px;
    font-weight: 600;
    user-select: none;
    align-items: center;

    background-size: cover !important;
    background-position: center !important;
    background-color: var(--primary-header);

    svg {
        flex-shrink: 0;
    }

    /*@media only screen and (max-width: 768px) {
        padding: 0 12px;
    }*/

    @media (pointer: coarse) {
        height: 56px;
    }
    
    ${ props => props.background && css`
        height: 120px !important;
        align-items: flex-end;

        text-shadow: 0px 0px 1px black;
    ` }

    ${ props => props.placement === 'secondary' && css`
        background-color: var(--secondary-header);
        padding: 14px;
    ` }

    ${ props => props.borders && css`    
        border-start-start-radius: 8px;
    ` }
`;