﻿.pricelabel
{
	position:absolute;
	
	font-weight:bold;
	font-size:23px;
	line-height:23px;
	text-align:right;
	white-space:nowrap;

    @pv-pricelabel();

    span.value 
    {
		@pv-pricelabel-span();

        small 
        {
			position:relative;
			left:0;
			top:0;
        }
    }

	span.currency
	{
		@pv-pricelabel-currency();
	}

	&.top 
    {
		top:-15px;
	}

    /* heul klein */
    &.tiny 
    {
		padding:5px 10px 0 6px;
		width:35px;
		height:24px;
		font-size:11px;
		line-height:11px;
        
		@pv-pricelabel-tiny();

		span.value
		{
			@pv-pricelabel-tiny-span();
		}
	}/*46x30*/    
     
    /* klein */
    small 
    {
		@pv-pricelabel-small();
	}

    /* middel */
	&.medium 
    {
		width: 61px;
		height: 30px;
		padding: 10px 6px 10px 12px;
		position: absolute;
		right: -3px;
		bottom: -35px;
		line-height:20px;

		font-weight: bold;
		font-size: 20px;
		text-align: center;
		background-size:77px;
		color: @pv-color-red;

        small 
        {
            left:15px;
        }

		span.value 
        {
			right:12px;
			bottom:10px;
		}

        &.no-pp
        {
            span.value
            {
                bottom:15px;
            }
        }

        span.currency 
        {
			@pv-pricelabel-medium-currency();
		}
	}
       
    /* groot */
    &.huge 
    {
		@pv-pricelabel-huge();

		font-size:25px;
		font-weight:bold;
		text-align:left;


        small 
        {
			@pv-pricelabel-huge-small();
            font-size:12px;
            position:absolute;

        }

        span.value 
        {
			@pv-pricelabel-huge-span();

            small 
            {
				position:static;
			}

            &:first-child 
            {
	            bottom:32px;
            }
		}

	}

	        .price-popup {

                .iconbox{
                    top:0 !important;
                    cursor:help;
                }

                span{
                    animation: fadeIn .2s ease;
                    position: absolute;
                    z-index: 4;
                    background: #FFFFFF;
                    box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.07), 0px 0.893452px 17.869px rgba(0, 0, 0, 0.0417275), 0px 0.266004px 5.32008px rgba(0, 0, 0, 0.0282725);
                    width: 304px;
                    height: 178px;
                    font-style: normal;
                    font-weight: 300;
                    font-size: 12px;
                    line-height: 20px;
                    color: #A8A8A8;
                    top: -190px;
                    left: -52px;
                    padding: 16px;
                    box-sizing: border-box;
                    text-align: left;
                    border-radius: 16px;
                    cursor: zoom-out;
                    visibility:hidden;
                    white-space:normal;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        top: 99%;
                        right: 50%;
                        margin-right: -10px;
                        width: 0;
                        height: 0;
                        border-top: solid 10px white;
                        border-left: solid 10px transparent;
                        border-right: solid 10px transparent;
                    }
                }

                input {
                    display: none;
                    &:checked + span {
                        visibility: visible;
                        opacity: 1;
                    }
                }
            }
}

/* ALTIJD DEZE TONEN? */
#receipt .pricelabel.huge 
{
	span.value 
    {
	}

	small 
    {
		right: 30px;
		left:auto;
		position:absolute; 
		font-size: 12px;
		line-height: 12px;
		text-align: left;
	}

}

#receipt .price .fieldMessageBox { 
    display:none;
    right:50px;
    top:55px; 

    .arrow 
    {
	    left:auto;
	    right:11px;
	    top:-11px;
	    .transform( rotate(90deg) );
    }

    &:hover .fieldMessageBox { display:block; }
}


