@import url('meta');

.__circleImg(@w){
    &.circle {
        border-radius: 50%;
        >img {
            border-radius: 50%;
        }
        &.landscape, &.portrait {
            overflow: hidden;
            width: @w * @padding/10;
            height: @w * @padding/10;
            >img {
                border-radius: 0;
                max-width: none;
                width: auto;
                height: 100%;
                margin-left: -1 * @w * @padding/40;
            }
        }
        &.portrait {
            >img {
                width: 100%;
                height: auto;
                margin: 0;
            }
        }
    }
}

.__calcImgSize(@size) {
    @_width: @padding * @size/10;
    width: @_width;
    &.circle {
        border-radius: @_width/2;
    }
}

.__imgSize(@group) when(@group = false) {
    &.middle { .__calcImgSize(300); }
    &.mini { .__calcImgSize(22); }
    &.tiny { .__calcImgSize(35); }
    &.small { .__calcImgSize(60); }
    &.large { .__calcImgSize(450); }
    &.big { .__calcImgSize(600); }
    &.huge { .__calcImgSize(800); }
    &.massive { .__calcImgSize(860); }
}

.__imgSize(@group) when(@group = true) {
    &.middle {
        @_width: 300;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
    &.mini {
        @_width: 22;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
    &.tiny {
        @_width: 35;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
    &.small {
        @_width: 60;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
    &.large {
        @_width: 450;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
    &.big {
        @_width: 600;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
    &.huge {
        @_width: 800;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
    &.massive {
        @_width: 960;
        .__circleImg(@_width);
        &>img {
            .__calcImgSize(@_width); 
        }
    }
}

img@{NS}.image {
    max-width: 100%;
    height: auto;
    &.round {
        border-radius: @radius;
    }
    &.fluid {
        ._FLUID_EL();
    }
    .__imgSize(false);
}

@{NS}.image {
    >img {
        max-width: 100%;
        height: auto;
    }
    &.fluid > img {
        ._FLUID_EL();
    }
    &.round >img {
        border-radius: @radius;
    }
    .__imgSize(true);
}

