/*
	CSS DOCUMENT
	PROPERTY OF DULCET GAMES INC.

	March 7, 2018
*/





.button-dropdown
{
    border-radius: 0 !important;
}


/* ! ============================================================================*/



.img--button.selected {box-shadow: var(--heavy-box-shadow)}
.img--button.round {
    border-radius: 50%;
    box-shadow: var(--std-box-shadow);
}

.tooltip-container:hover > .img--button,
.img--button.selected,
.img--button:hover {
    cursor: pointer;
    transform: scale3d(1.2, 1.2, 1.2);
}


.img--button.primary {background: var(--sc-primary-background); color: var(--sc-primary-foreground)}
.img--button.secondary {background: var(--sc-secondary-background); color: var(--sc-secondary-foreground)}

.img--button.green {background: var(--chaptermaker-color-green-background); color: var(--chaptermaker-color-green-foreground)}


.img--button.small {
    width: 2rem; height: 2rem;
    margin: 1rem;
    
    font-size: 1.2rem;
    line-height: 2rem;
}

/* Flat button has no hover effect on it */

.img--button.tooltip-container { width: 2.5rem; }
.img--button--flat,
.img--button {
    font-size: 1.4rem;
    line-height: 2.5rem;
    text-align: center;
    vertical-align: middle;
    
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.75rem;
    transition: 0.1s all;
    /*  https://teamtreehouse.com/community/margin-not-working-for-images
        <img> elements are inline elements like text, which don't accept top or bottom margins.
        Add the following declaration to your img CSS rule to make top and bottom margins work on your img element
        display: inline-block;
    */
    display: inline-block;
    position: relative;
}


/* ! Slider buttons: contains a .button and child buttons */
/* When you hover on the .button, the child buttons are shown with a sliding effect */

/* The slider container: contains one .button and any quantity of children button */
.button-slider--container:hover {padding-right: 1rem}
.button-slider--container
{
    display: flex;
    width: fit-content;
    width: -moz-fit-content;
    background-color: var(--sc-primary-light-background);
    border-radius: 2rem;
    transition: 0.2s all;
}

/* when we hover, we display all the child buttons */
.button-slider--container:hover .button-slider--button {display: block}

.button-slider--button {
    display: none;

    /* All child buttons need to be the exact size as the .button */
    height: 2.7vw;
    width: 2.7vw;

    margin: 0 0.5rem;
    animation: zoomIn 0.3s;
}

/* overwrite button images in the slider (they need to be smaller than usual to fit in this */
.button-slider--container .tooltip-container {z-index: 1}
.button-slider--container .tooltip-container:hover .img--button {
    margin: 0.25vw;
    height: 2.2vw;
    width: 2.2vw;
} 

.button-slider--container .img--button {
    margin: 0.5vw;
    height: 1.7vw;
    width: 1.7vw;
}