/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

// Sets the size of the items in the folder
// representation. Instead of a grid,
// a list is used.


// Refactored to use Victorizr
.items-holder {
    .item {
        &.grid-item {
            $titleH: 30px;
        }
    }
}

body.phone,
body.tablet {
    .items-holder {
        .item {
            &.grid-item {
                width: 100%;
                >.contents {
                    top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
                }
                .bar {
                    &.top-bar {
                        // Becomes the right side of the item
                        bottom: 0 !important; left: auto !important; right: 20px !important;
                        width: 40px !important; height: auto !important;
                        text-align: right;
                    }
                    &.bottom-bar {
                        // Becomes the left side of the item
                        left: $mobileListIconSize + $interiorMarginLg;
                        right: 60px;
                    }

                }
                .item-main {
                    .item-type,
                    .t-item-icon {
                        font-size: $mobileListIconSize;
                        left: $interiorMarginLg + $interiorMargin;
                        line-height: normal;
                    }
                    .item-open {
                        display: block;
                        opacity: 1;
                        font-size: 1em;
                        width: auto;
                    }
                }
            }
        }
    }
}

body.phone {
    .items-holder {
        .item {
            &.grid-item {
                $dHei: $phoneItemH;
                height: $dHei;
                .bar {
                    &.top-bar {
                        // Becomes the right side of the item
                        line-height: $dHei !important;
                    }
                    &.bottom-bar {
                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
                    }
                }
                .item-main {
                    .item-type {
                        @include verticalCenterBlock($dHei, $mobileListIconSize);
                    }
                    .item-open {
                        line-height: $dHei;
                    }
                }
            }
        }
    }
}

body.tablet {
    .items-holder {
        .item {
            &.grid-item {
                $dHei: $tabletItemH;
                height: $dHei;
                .bar {
                    &.top-bar {
                        // Becomes the right side of the item
                        line-height: $dHei !important;
                    }
                    &.bottom-bar {
                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
                    }
                }
                .item-main {
                    .item-type {
                        @include verticalCenterBlock($dHei, $mobileListIconSize);
                    }
                    .item-open {
                        line-height: $dHei;
                    }
                }
            }
        }
    }
}