/* ==========================================================================
Product Categories shortcode styles - begin
========================================================================== */

.edge-prod-cats-holder{

    .edge-prod-cat{
        float: left;
        position: relative;
        box-sizing: border-box;
        @include edgeTransition(opacity .2 ease-in-out);

        .edge-prod-cat-inner{
            @include edgeRelativeHolderLayout();
            @include edgeTransition(padding 0.2s ease-in-out);
            height: 100%;
            box-sizing: border-box;
            padding: 0 0 39px;
        }

        .edge-prod-cat-content{
           &.top{
               position: absolute;
               top:0;
               left:0;
           }

           &.bottom{
               position: relative;
               margin:20px 0 0 0;
               .edge-prod-cat-button-holder{
                   margin: 32px 0 0;
               }
            }

            .edge-category-title{
                line-height: 1em;
                letter-spacing: 1px;
                margin: 0 0 7px;
                font-weight: 400;
            }

            .edge-prod-cat-price-holder{
                text-transform: lowercase;
                font-family: $heading-font;
                font-size: 15px;
                font-weight: 400;
                color: $additional-color;
            }
        }

        &:hover{
            .edge-prod-cat-content{
                .edge-prod-cat-button-holder{
                    opacity: 1;
                }
                &.top{
                    .edge-prod-cat-button-holder{
                        background-color: #f4f4f4;
                    }
                }
            }
        }

        &.edge-cat-with-image{

            .edge-prod-cat-content{
                &.top{
                    top: 23px;
                    left: 25px;
                }
            }

            .edge-prod-cat-inner:hover { 
               .edge-prod-cat-content.bottom {
                    margin: 0 0 0 3%; 
                }
            }
        }
    }

    &.edge-regular-zoom {
        .edge-cat-with-image {
            .edge-pcw-inner {
                overflow:hidden;
            }

            a {
                display:block;
            }

            img {
                display:block;
                @include edgeTransition(all 0.25s ease-in-out);
            }

            .edge-prod-cat-inner:hover { 
                .edge-pcw-inner {
                    @include edgeTransform(none);

                    img{ 
                        @include edgeTransform(scale(1.1));
                    }
                }
                .edge-prod-cat-content.bottom {
                    margin: 0; 
                }
            }
        }
    }

    &.edge-shrink-zoom {
        .edge-cat-with-image {

            .edge-pcw-inner {
                @include edgeTransition(all .25s ease-in-out 0s);
                overflow:hidden;
                img {
                    display:block;
                    @include edgeTransition(all .25s ease-in-out 0s);
                }
            }

            .edge-prod-cat-content.bottom {
                @include edgeTransition(all .25s ease-in-out 0s);
            }

            .edge-prod-cat-inner:hover { 
                .edge-pcw-inner {
                    @include edgeTransition(all .25s ease-in-out .25s);
                    @include edgeTransform(scale(0.95));

                    img{
                        @include edgeTransition(all .25s ease-in-out .25s); 
                        @include edgeTransform(scale(1.15));
                    }
                }

                .edge-prod-cat-content.bottom {
                    @include edgeTransition(all .25s ease-in-out .25s);
                }
            }
        }
    }

}

$columns_space_label: ('no', 'tiny', 'small', 'normal', 'large');
$columns_space_width: (0, 5, 10, 15, 25);

@for $i from 0 to length($columns_space_label) {
&.edge-#{nth($columns_space_label,$i+1)}-space {
    $column_width: nth($columns_space_width,$i+1);
    $column_width_padding: $column_width * 2;

    .edge-prod-cat-holder-inner {
        @if($column_width == 0) {
            margin: 0;
            } @else {
                margin: 0 -#{$column_width}px;
            }

            .edge-prod-cat{
                padding: 0 #{$column_width}px;
                margin: 0 0 #{2*$column_width}px;
            }
        }
    }
}

/*************** Standard Layout - begin ***************/

$standard_list_columns: ('two', 'three', 'four');

@for $i from 0 to length($standard_list_columns) {
    &.edge-#{nth($standard_list_columns,$i+1)}-columns {
        $column_width: 100%/($i+2);

        .edge-prod-cat{
            width: $column_width;

            @media only screen and (min-width: $ipad-landscape-plus-pixel) {

                &:nth-child(#{$i+2}n+1) {
                    clear: both;
                }
            }
        }
    }
}

/*************** Standard Layout - end ***************/
