/***************
 ! Color chooser
****************/

@include exports("colorchooser") {
    colorswatch {
        // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
        // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
        // applied to the overlay box.

        &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state

        $_colorswatch_radius: $roundness;

        // base color corners rounding
        // to avoid the artifacts caused by rounded corner anti-aliasing the base color
        // sports a bigger radius.
        // nth-child is needed by the custom color strip.

        &.top {
            border-top-left-radius: $_colorswatch_radius + .5px;
            border-top-right-radius: $_colorswatch_radius + .5px;

            overlay {
                border-top-left-radius: $_colorswatch_radius;
                border-top-right-radius: $_colorswatch_radius;
            }
        }

        &.bottom {
            border-bottom-left-radius: $_colorswatch_radius + .5px;
            border-bottom-right-radius: $_colorswatch_radius + .5px;

            overlay {
                border-bottom-left-radius: $_colorswatch_radius;
                border-bottom-right-radius: $_colorswatch_radius;
            }
        }

        &.left,
        &:first-child:not(.top) {
            border-top-left-radius: $_colorswatch_radius + .5px;
            border-bottom-left-radius: $_colorswatch_radius + .5px;

            overlay {
                border-top-left-radius: $_colorswatch_radius;
                border-bottom-left-radius: $_colorswatch_radius;
            }
        }

        &.right,
        &:last-child:not(.bottom) {
            border-top-right-radius: $_colorswatch_radius + .5px;
            border-bottom-right-radius: $_colorswatch_radius + .5px;

            overlay {
                border-top-right-radius: $_colorswatch_radius;
                border-bottom-right-radius: $_colorswatch_radius;
            }
        }

        &.dark overlay {
            color: $selected_fg_color;

            &:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); }

            &:backdrop { color: $backdrop_selected_fg_color; }
        }

        &.light overlay {
            color: $text_color;

            &:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); }

            &:backdrop { color: $backdrop_text_color; }
        }

        &:drop(active) {
            box-shadow: none;

            &.light overlay {
                border-color: $drop_target_color;
                box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
                            inset 0 0 0 1px $drop_target_color;
            }

            &.dark overlay {
                border-color: $drop_target_color;
                box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize($black, .7), $borders_color),
                            inset 0 0 0 1px $drop_target_color;
            }
        }

        overlay {
            border: 1px solid if($variant == 'light', transparentize($black, .7), $borders_color);

            &:hover {
                box-shadow: inset 0 1px transparentize($white, .6),
                            inset 0 -1px transparentize($black, .8);
            }

            &:backdrop,
            &:backdrop:hover {
                border-color: if($variant == 'light', transparentize($black, .7), $borders_color);
                box-shadow: none;
            }
        }

        &:disabled {
            opacity: .5;

            overlay {
                border-color: transparentize($black, .4);
                box-shadow: none;
            }
        }

        row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }

        &#add-color-button {
            border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;

            &:only-child { border-radius: $_colorswatch_radius; }

            overlay {
                background-color: shade($bg_color, .95);
                color: $fg_color;

                &:hover { background-color: shade($bg_color, .9); }

                &:backdrop { background-color: shade($backdrop_bg_color, .95); }
            }
        }

        &#editor-color-sample {
            border-radius: $_colorswatch_radius;

            overlay { border-radius: $_colorswatch_radius + .5px; }
       }
    }

    button.color {
        padding: $spacing - 1px;

        colorswatch:only-child {
            &, overlay { border-radius: 0; }

            @if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); }
        }

        @if $variant == 'light' {
            &:disabled,
            &:backdrop,
            &:active,
            &:checked { colorswatch:only-child { box-shadow: none; } }
        }
    }

    colorchooser .popover.osd { border-radius: $roundness; }
}


/***********************
! Font and file choosers
************************/

@include exports("miscchoosers") {
    filechooser {
        /* for fallback when header bar not used */
        .dialog-action-box {
            border-top: 1px solid $borders_color;

            &:backdrop { border-top-color: $backdrop_borders_color; }
        }

        #pathbarbox { border-bottom: 1px solid $bg_color; }
    }

    filechooserbutton:drop(active) {
        box-shadow: none;
        border-color: transparent;
    }
}