@import "tools";

.hidden-box-wrapper {
    position: relative;

    .hidden-box {
        position: absolute;
        left: 0;
        display: none;
        border: 1px solid #ddd;
        padding: 1em 1em .5em 1em;
        background: #fff;
        -moz-box-shadow: 2px 2px 2px #ddd;
        -webkit-box-shadow: 2px 2px 2px #ddd;
        box-shadow: 2px 2px 2px #ddd;
        z-index: 500;

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            @include size-px(font-size, 11);

            @include size-px(column-width, 132);
            @include size-px(-moz-column-width, 132);
            @include size-px(-webkit-column-width, 132);

            @media screen and (min-width: 24em) {
                @include size-px(width, 320);
            }

            @media screen and (min-width: 34em) {
                @include size-px(width, 480);
            }

            @media screen and (min-width: 62.5em) {
                @include size-px(width, 528);
            }



            li {
                margin-bottom: 1em;

                @media screen and (min-width: 62.5em) {
                    margin-bottom: .5em;
                }
            }
        }
    }
}