/********************************************** 
partbutton-1.5
**********************************************/

/* partButton */
.partButton {
    position: relative;
    display: inline-flex;
    justify-content: center; /* center text when the button has more width than the text */
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    vertical-align: top;
    text-decoration: none; /* underline reset for A element */
    cursor: pointer; /* when a SPAN element is used */
    outline:0; /* outline will be handled with box-shadow or another effect on focus */
    line-height: 1.3em;
}

    /* label */
    .buttonLabel {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
		position: relative;
        z-index: 10;
    }

    /* icon */
    .buttonIcon {
		position: relative;
        z-index: 10;
    }

        .buttonIcon svg {
			height: 16px;  
            max-width: 16px;
            display: block;
        }
        
        .buttonIcon .partFontIcon {
            vertical-align: middle;
        }

    /* icon and label margin */
    .buttonIcon + .buttonLabel, .buttonLabel + .buttonIcon {
        margin-left: 6px;
    }

    /* default */
    .partButton.default {
        font-size: 16px;
        font-weight: 600;
        height: 36px;
        border-radius: 4px;
        padding: 0px 15px;
        background-color: var(--color-blue);
        color: #fff;
        transition: background-color .3s ease /* hover + focus */, box-shadow .15s ease-in-out /* :focus */, transform 0.15s ease /* active */;
    }

        .partButton.default svg {
            fill: #fff;
        }

        /* hover */
		@media (hover: hover) {
			.partButton.default:not([disabled]):hover, .partButton.default:focus {
                background-color: var(--color-blue-darker)
			}

            .partButton.default:hover svg {
                fill: #fff;
            }
		}	

		/* focus */
		.partButton.default:focus {
            box-shadow: 0 0 0 0.2rem rgb(0,0,0,0.15);
		}

    /* solid */
    .partButton.solid {
        font-size: 16px;
        font-weight: 600;
        height: 36px;
        border-radius: 4px;
        padding: 0px 15px;
        transition: background-color .3s ease /* hover + focus */, box-shadow .15s ease-in-out /* :focus */, transform 0.15s ease /* active */;
    }


        /* white */
        .partButton.solid.white {
            background-color: #fff;
            color: #444;
        }

            .partButton.solid.white svg {
                fill: #444;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.white:not([disabled]):hover, .partButton.solid.white:focus {
                    background-color: #151515;
                    color: #fff;
                }

                .partButton.solid.white:hover svg {
                    fill: #fff;
                }
            }

        /* light grey */
        .partButton.solid.lightGrey {
            background-color: #f5f5f5;
            color: #444;
        }

            .partButton.solid.lightGrey svg {
                fill: #444;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.lightGrey:not([disabled]):hover, .partButton.solid.lightGrey:focus {
                    color: #000;
                    background-color: #E5E5E5;
                }

                .partButton.solid.lightGrey:not([disabled]):hover svg {
                    fill: #000;
                }
            }

        /* green */
        .partButton.solid.green {
            background-color: var(--color-green);
            color: #fff;
        }

            .partButton.solid.green svg {
                fill: #fff;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.green:not([disabled]):hover, .partButton.solid.green:focus {
                    background-color: var(--color-green-darker);
                }
            }

        /* light green */
        .partButton.solid.lightGreen {
            background-color: var(--color-green-lighter);
            color: var(--color-green);
        }

            .partButton.solid.lightGreen svg {
                fill: var(--color-green);
            }
            
            /* hover */
            @media (hover: hover) {
                .partButton.solid.lightGreen:not([disabled]):hover, .partButton.solid.lightGreen:focus {
                    background-color: var(--color-green);
                    color: #fff;
                }

                .partButton.solid.lightGreen:not([disabled]):hover svg {
                    fill: #fff;
                }
            }

         /* orange */
        .partButton.solid.orange {
            background-color: var(--color-orange);
            color: #fff;
        }

            .partButton.solid.orange svg {
                fill: #fff;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.orange:not([disabled]):hover, .partButton.solid.orange:focus {
                    background-color: var(--color-orange-darker);
                }
            }

        /* light orange */
        .partButton.solid.lightOrange {
            background-color: var(--color-orange-lighter);
            color: var(--color-orange);
        }

            .partButton.solid.lightOrange svg {
                fill: var(--color-orange);
            }
            
            /* hover */
            @media (hover: hover) {
                .partButton.solid.lightOrange:not([disabled]):hover, .partButton.solid.lightOrange:focus {
                    background-color: var(--color-orange);
                    color: #fff;
                }

                .partButton.solid.lightOrange:not([disabled]):hover svg {
                    fill: #fff;
                }
            }

        /* red */
        .partButton.solid.red {
            background-color: var(--color-red);
            color: #fff;
        }

            .partButton.solid.red svg {
                fill: #fff;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.red:not([disabled]):hover, .partButton.solid.red:focus {
                    background-color: var(--color-red-darker);;
                }
            }
        
        /* red light */
        .partButton.solid.lightRed {
            background-color: var(--color-red-lighter);
            color: var(--color-red);
        }

            .partButton.solid.lightRed svg {
                fill: var(--color-red);
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.lightRed:not([disabled]):hover, .partButton.solid.lightRed:focus {
                    background-color: var(--color-red);
                    color: #fff;
                }

                .partButton.solid.lightRed:not([disabled]):hover svg {
                    fill: #fff;
                }
            }   

        /* grey */
        .partButton.solid.grey {
            background-color: var(--color-grey);
            color: #444;
        }

            .partButton.solid.grey svg {
                fill: #fff;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.grey:not([disabled]):hover, .partButton.solid.grey:focus {
                    background-color: var(--color-grey-darker);
                }
            }
        
        /* blue */
        .partButton.solid.blue {
            background-color: var(--color-blue);
            color: #fff;
        }

            .partButton.solid.blue svg {
                fill: #fff;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.blue:not([disabled]):hover, .partButton.solid.blue:focus {
                    background-color: var(--color-blue-darker);
                }
            }

        /* light blue */
        .partButton.solid.lightBlue {
            background-color: var(--color-blue-lighter);
            color: var(--color-blue);
        }

            .partButton.solid.lightBlue svg {
                fill: var(--color-blue);
            }
            
            /* hover */
            @media (hover: hover) {
                .partButton.solid.lightBlue:not([disabled]):hover, .partButton.solid.lightBlue:focus {
                    background-color: var(--color-blue);
                    color: #fff;
                }

                .partButton.solid.lightBlue:not([disabled]):hover svg {
                    fill: #fff;
                }
            }

        /* purple */
        .partButton.solid.purple {
            background-color: var(--color-purple);
            color: #fff;
        }

            .partButton.solid.purple svg {
                fill: #fff;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.purple:not([disabled]):hover, .partButton.solid.purple:focus {
                    background-color: var(--color-purple-darker);
                }
            }

        /* light purple */
        .partButton.solid.lightPurple {
            background-color: #faf4ff;
            color: var(--color-purple-lighter);
        }

            .partButton.solid.lightPurple svg {
                fill: var(--color-purple);
            }
            
            /* hover */
            @media (hover: hover) {
                .partButton.solid.lightPurple:not([disabled]):hover, .partButton.solid.lightPurple:focus {
                    background-color: var(--color-purple);
                    color: #fff;
                }

                .partButton.solid.lightPurple:not([disabled]):hover svg {
                    fill: #fff;
                }
            }

        /* turquoise */
        .partButton.solid.turquoise {
            background-color: var(--color-turquoise);
            color: #fff;
        }

            .partButton.solid.turquoise svg {
                fill: #fff;
            }

            /* hover */
            @media (hover: hover) {
                .partButton.solid.turquoise:not([disabled]):hover, .partButton.solid.turquoise:focus {
                    background-color: var(--color-turquoise-darker);
                }
            }

        /* light turquoise */
        .partButton.solid.lightTurquoise {
            background-color: #faf4ff;
            color: var(--color-turquoise-lighter);
        }

            .partButton.solid.lightTurquoise svg {
                fill: var(--color-turquoise);
            }
            
            /* hover */
            @media (hover: hover) {
                .partButton.solid.lightTurquoise:not([disabled]):hover, .partButton.solid.lightTurquoise:focus {
                    background-color: var(--color-turquoise);
                    color: #fff;
                }

                .partButton.solid.lightTurquoise:not([disabled]):hover svg {
                    fill: #fff;
                }
            }

        /* focus */
        .partButton.solid:focus {
            box-shadow: 0 0 0 0.2rem rgb(0,0,0,0.15);
        }

    /* outline */
    .partButton.outline {
        font-size: 16px;
        height: 36px;
        border-radius: 4px;
		padding: 0px 15px;
        background-color: transparent; 
        border-width: 2px; border-style: solid; font-weight: 500;
        transition: background-color 0.3s ease, border-color .3s ease /* hover + focus */, box-shadow .15s ease-in-out /* :focus */, transform .15s ease-in-out /* active */;
    }

        /* focus */
		.partButton.outline:focus {
            box-shadow: 0 0 0 0.2rem rgb(0,0,0,0.15);
		}

        /* blue */
        .partButton.outline.blue {
            color:var(--color-blue); border-color:var(--color-blue);
        }

            /* hover */
            @media (hover: hover) {
                .partButton.outline.blue:not([disabled]):hover, .partButton.outline.blue:focus {
                    background-color: var(--color-blue);
                    color: #fff;
                }
            }

        /* red */
        .partButton.outline.red {
            color:var(--color-red); border-color:var(--color-red);
        }

            /* hover */
            @media (hover: hover) {
                .partButton.outline.red:not([disabled]):hover, .partButton.outline.red:focus {
                    background-color: var(--color-red);
                    color: #fff;
                }
            }

        /* green */
        .partButton.outline.green {
            color:var(--color-green); border-color:var(--color-green);
        }

            /* hover */
            @media (hover: hover) {
                .partButton.outline.green:not([disabled]):hover, .partButton.outline.green:focus {
                    background-color: var(--color-green);
                    color: #fff;
                }
            }

        /* orange */
        .partButton.outline.orange {
            color:var(--color-orange); border-color:var(--color-orange);
        }

            /* hover */
            @media (hover: hover) {
                .partButton.outline.orange:not([disabled]):hover, .partButton.outline.orange:focus {
                    background-color: var(--color-orange);
                    color: #fff;
                }
            }

        /* purple */
        .partButton.outline.purple {
            color:var(--color-purple); border-color:var(--color-purple);
        }
        
        /* hover */
        @media (hover: hover) {
            .partButton.outline.purple:not([disabled]):hover, .partButton.outline.purple:focus {
                background-color: var(--color-purple);
                color: #fff;
            }
        }
        
        /* underline */
            .partButton.underline {
                font-size: 16px;
                font-weight: 700;
                color: #999;
                border-bottom:solid 3px var(--color-grey);
                transition: border-color .3s ease /* hover + focus */, transform .15s ease-in-out /* active */;
            }

        /* hover & focus */
            @media (hover: hover) {
            .partButton.underline:not([disabled]):hover, .partButton.underline:focus {
            border-color: #000;
            }
        }

    /* naked */
     .partButton.naked {
        font-size: 16px;
        font-weight: 500;
        color: #000;
        border-bottom: solid 2px transparent;
        transition: border-color 0.3s ease, transform .15s ease-in-out /* active */;
    }

        /* hover */
        @media (hover: hover) {
            .partButton.naked:not([disabled]):hover, .partButton.naked:focus {
                border-color: #000;
            }
        }

    /* link */
    .partButton.link {
        font-size: 16px;
        font-weight: 400;
        color: #000;
        padding:3px 0; /* improved click area */
        transition: color 0.3s ease;
    }

        .partButton.link .buttonLabel {
            background-image: linear-gradient(#000, #000), linear-gradient(var(--color-blue), var(--color-blue)); background-size: 100% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.3s ease;
        }

        .partButton.link .buttonIcon   {
            opacity: 0; transition: opacity 0.3s ease, left 0.3s ease; color: #000; left: -22px; margin-left: 4px;
        }

        /* hover */
        @media (hover: hover) {
            .partButton.link:not([disabled]):hover .buttonLabel, .partButton.link:focus .buttonLabel {
                color: var(--color-blue); background-size: 0 1px, 100% 1px;
            }

            .partButton.link:not([disabled]):hover .buttonIcon, .partButton.link:focus .buttonIcon {
                opacity: 1; color: var(--color-blue); left:0;
            }
        }

    /* close */
    .partButton.close {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        margin-right: 10px;
        color: #000;
        border:solid 2px transparent;
        transition: border-color .3s ease /* hover + focus */, box-shadow .15s ease-in-out /* :focus */, transform 0.15s ease /* active */;
    }
    
        .partButton.close .buttonIcon {
            font-size: 28px;
        }

        .partButton.close .buttonIcon .partFontIcon {
            --partFontIcon-size: 28px;
        }

        /* hover */
        @media (hover: hover) {
            .partButton.close:not([disabled]):hover, .partButton.close:focus {
                border-color: #000;
            }
        }

    /* small */
    .partButton.small 	{height:28px; padding:0px 8px; font-size: 13px;}

        .partButton.small .buttonIcon {
            font-size: 16px;
        }

        .partButton.small .buttonIcon .partFontIcon {
            --partFontIcon-size: 16px;
        }
    
    /* active */
    .partButton:not([disabled]):active {
        transform: translateY(2px);
    }
    
	/* enable mobile hover effect */
    @media (hover: none) {      
        .partButton:before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10, 10);
            opacity: 0;
            transition: transform .5s, opacity 1s;
        }
        
        .partButton:active:before {
            transform: scale(0, 0);
            opacity: .3;
            transition: 0s;
        }
    }

    /* logic states */
        .partButton.selected {
        
        }
    
        /* disabled */
        .partButton.disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* loading */
        .partButton.loading {
            cursor: wait;
            opacity: 0.3;
        }

        .partButton.loading:after {
            animation-delay: 1.5s;
            animation: loadingBar 1s infinite;
            background: rgba(0, 0, 0, 0.3);
            content: '';
            display: block;
            height: 5px;
            left: 0;
            padding: 0;
            position: absolute;
            top: 0;
            width: 1rem;
        }

        @keyframes loadingBar {0% {left: 0; width: 0; } 50% {left: 0; width: 100%; } 100% {left: 100%; width: 0;}}