/*!
 * Classic picker styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */

@import "_variables.less";


/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {

    // Make it full-width so that it doesn’t collapse.
    width: 100%;
}



/**
 * The holder is the base of the picker.
 */
.picker__holder {

    // The base stylings.
    position: absolute;
    background: @bg-white;

    // Add a light border - except top & bottom to let it collapse.
    border: 1px solid lighten( @border-grey, 20% );
    border-top-width: 0;
    border-bottom-width: 0;

    // Round the bottom corners.
    .border-radius( 0 0 @picker-border-radius @picker-border-radius );

    // Let’s not go 100% + 2px.
    .box-sizing( border-box );

    // Specify the min & max widths.
    min-width: @classic-min-width;
    max-width: @classic-max-width;

    // Hide everything to begin with.
    max-height: 0;
    .opacity( 0 );

    // Tilt the picker.
    .transform( translateY( -1em ) perspective( 600px ) rotateX( 10deg ) );

    // Everything should be smoothly animated – the height & border should wait till the rest is done.
    @transition: all @speed-animate-in ease-out, max-height 0 @speed-animate-in, border-width 0 @speed-animate-in;
    .transition( @transition );
}



/**
 * The frame and wrap work together to ensure that
 * clicks within the picker don’t reach the holder.
 */
.picker__frame {
    padding: 1px;
}
.picker__wrap {
    margin: -1px;
}



/**
 * When the picker opens...
 */
.picker--opened {

    .picker__holder {

        // Reveal the content.
        max-height: @classic-max-height;
        .opacity( 1 );

        // Expand the top & bottom borders.
        border-top-width: 1px;
        border-bottom-width: 1px;

        // Straighten the picker.
        .transform( translateY( 0 ) perspective( 600px ) rotateX( 0 ) );

        // Everything should be smoothly animated – except the height & border.
        @transition: all @speed-animate-in ease-out, max-height 0, border-width 0;
        .transition( @transition );

        // Add a light shadow.
        .box-shadow( @classic-box-shadow );
    }
}



