/*** django-rgallery custom less **********************************************/

/*** Colors *******************************************************************/
@black:             #000;
@gris:              #666;
@gris_claro:        #f5f5f5;
@white:             #fff;
@transparente:      transparent;
@main_color:        #3dad82; // main color
@sec_color:         #d9534f; // secondary color
@a:                 #0088cc;
@a_hover:           #005580;
@bg_color:          #f8f8f8; // background color


/*** Functions ****************************************************************/
.round (@radius: 4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.center {
    text-align: center;
    margin: 0px auto;
}

// Create variables [optional]
@basefont: 14; // in pixels
.font-size( @target: @basefont, @context: @basefont ) {
    font-size: (@target / @context) + 0em;
}

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
    & > img, & a > img {
        display: block;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    & .caption {
        padding: 9px;
        color: #333333;
    }
}


/*** gallery ******************************************************************/

section.gallery {
    h1 {
        padding: 5px;
        text-transform: uppercase;
        font-size: 22px;
    }
    ul.gallery {

        padding: 0; margin: 0;
        li {
            width: 31%;
            margin: 1%;
            float: left;
            border: 1px solid #ddd;
            position: relative;
            list-style: none;
            height: 260px;
            &.cookie-selected {
                border: 1px solid green;
                background: rgba(76, 216, 115, 0.4);
                a { background: rgba(76, 216, 115, 0); }
            }
            &.select2-search-field {
                width: 100%;
                border: none;
            }
            &.select2-search-choice {
                width: auto;
            }
            a {
                .thumbnail;
                .center;
                border: none;
                padding: 10px;
                i { .font-size(140); }
                div { .center; .font-size(11); color: @black; }
                img { opacity: 0.8; }
                &:hover {
                    img { opacity: 1; }
                }
            }
            a.protected {
                color: @sec_color;
            }

            .photo {
                &:hover {
                    .photo-info {
                        display: block;
                        background: rgba(255, 255, 255, 0.5);
                        a, a:hover {
                            color: @black;
                        }
                        a.tag, span.tag {
                            float: left;
                            background: #fff;
                            padding: 3px 5px 3px 3px;
                            margin-right: 2px;
                            border: 1px solid @gris;
                            font-size: 10px;
                            .round(5px);
                            i { font-size: 10px; }
                        }
                        .photo-data {
                            ul {
                                padding: 0;
                                margin: 0 0 10px 0;
                                li {
                                    width: 100%;
                                    padding: 0;
                                    margin: 0;
                                    list-style: none;
                                    display: block;
                                    float: inherit;
                                    background: transparent;
                                    font-size: 10px;
                                    border: none;
                                    font-weight: 700;
                                    height: 25px;
                                }
                            }
                        }
                    }
                    .grupoactions {
                        display: block;
                        position: absolute;
                        top: 183px;
                        right: 60px;
                        a {
                            background-color: green;
                            padding: 2px 8px 3px 8px;
                        }
                        .fa-download {
                            background-color: transparent;
                            font-size: inherit;
                            color: @white;
                        }
                    }
                }
                .selectedbutton {
                    position: absolute;
                    top: -8px;
                    left: -1px;
                    z-index: 1;
                    button {
                          border-radius: 0px;
                          border-top: 1px solid #fff;
                          border-left: 1px solid #fff;
                    }
                    &:hover {
                        background-color: #fff;
                        border-color: #ddd;
                        .photo-info {
                            display: block;
                            background: blue;
                        }
                    }
                }
                .grupoactions {
                    display: none;
                }
                .photo-info {
                    display: none;
                    position: absolute;
                    top: 4px;
                    left: 0;
                    padding: 10px 20px;
                    width: 100%;
                    height: 100%;
                    a {
                        background-color: transparent;
                        padding: 0;
                        i { font-size: inherit !important; }
                        &.tag { margin-left: 10px; }
                    }
                }
                &.inactive img { opacity: 0.7; border: 2px dashed #999; }
                &.active img { opacity: 1; }
            }
        }
        .modal {
            .select2-choices {
                li {
                    height: auto !important;
                }
            }
            .select2-search-choice-close {
                margin: 0;
                background-color: transparent !important;
                padding: 7px !important;
            }
        }
    }
    .tags {
        margin: 20px 0 20px 0;
        padding: 0;
        li {
            display: inline;
            padding: 3px 5px 3px 3px;
            margin-right: 2px;
            border: 1px solid @gris;
            .round(5px);
            a { color: @gris; }
            &:hover {
                background: @gris_claro;
            }
        }
    }
    .cookiemenu-wrap {
        margin-bottom: 20px;
        &.affix {
            margin: 0px auto;
            background: #fff;
            top: 0;
            margin-left: 146px;
        }
        .advice {
            padding: 10px 0 0 0;
        }
    }
}