/**
 * Copyright (c) Enalean, 2016-Present. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@use "basepath";

/* stylelint-disable selector-id-pattern */
#lbOverlay {
    position: fixed;
    z-index: 99998;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
}

#lbOverlay.grey {
    background-color: #000000;
}

#lbOverlay.red {
    background-color: #330000;
}

#lbOverlay.green {
    background-color: #003300;
}

#lbOverlay.blue {
    background-color: #011d50;
}

#lbOverlay.gold {
    background-color: #666600;
}

#lbMain {
    position: absolute;
    z-index: 99999;
    left: 0;
    width: 100%;
    line-height: 0;
    text-align: center;
}

#lbMain a img {
    border: 0;
}

#lbOuterContainer {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: #ffffff;
}

#lbOuterContainer.grey {
    border: 3px solid #888888;
}

#lbOuterContainer.red {
    border: 3px solid #dd0000;
}

#lbOuterContainer.green {
    border: 3px solid #00b000;
}

#lbOuterContainer.blue {
    border: 3px solid #5f89d8;
}

#lbOuterContainer.gold {
    border: 3px solid #b0b000;
}

#lbDetailsContainer {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    background-color: #ffffff;
    font-size: 10px;
    line-height: 1.4em;
}

#lbDetailsContainer.grey {
    border: 3px solid #888888;
    border-top: 0;
}

#lbDetailsContainer.red {
    border: 3px solid #dd0000;
    border-top: 0;
}

#lbDetailsContainer.green {
    border: 3px solid #00b000;
    border-top: 0;
}

#lbDetailsContainer.blue {
    border: 3px solid #5f89d8;
    border-top: 0;
}

#lbDetailsContainer.gold {
    border: 3px solid #b0b000;
    border-top: 0;
}

#lbImageContainer,
#lbIframeContainer {
    padding: 10px;
}

#lbLoading {
    position: absolute;
    top: 45%;
    left: 0%;
    width: 100%;
    height: 32px;
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/loading.gif") center
        no-repeat;
    line-height: 0;
    text-align: center;
}

#lbHoverNav {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#lbImageContainer > #lbHoverNav {
    left: 0;
}

#lbHoverNav a {
    outline: none;
}

#lbPrev {
    display: block;
    left: 0;
    width: 49%;
    height: 100%;
    float: left;
    background: transparent url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/blank.gif")
        no-repeat;
}

#lbPrev.grey:hover,
#lbPrev.grey:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/prev_grey.gif") left
        15% no-repeat;
}

#lbPrev.red:hover,
#lbPrev.red:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/prev_red.gif") left 15%
        no-repeat;
}

#lbPrev.green:hover,
#lbPrev.green:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/prev_green.gif") left
        15% no-repeat;
}

#lbPrev.blue:hover,
#lbPrev.blue:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/prev_blue.gif") left
        15% no-repeat;
}

#lbPrev.gold:hover,
#lbPrev.gold:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/prev_gold.gif") left
        15% no-repeat;
}

#lbNext {
    display: block;
    right: 0;
    width: 49%;
    height: 100%;
    float: right;
    background: transparent url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/blank.gif")
        no-repeat;
}

#lbNext.grey:hover,
#lbNext.grey:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/next_grey.gif") right
        15% no-repeat;
}

#lbNext.red:hover,
#lbNext.red:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/next_red.gif") right
        15% no-repeat;
}

#lbNext.green:hover,
#lbNext.green:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/next_green.gif") right
        15% no-repeat;
}

#lbNext.blue:hover,
#lbNext.blue:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/next_blue.gif") right
        15% no-repeat;
}

#lbNext.gold:hover,
#lbNext.gold:visited:hover {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/next_gold.gif") right
        15% no-repeat;
}

#lbPrev2,
#lbNext2 {
    font-weight: bold;
    text-decoration: none;
}

#lbPrev2.grey,
#lbNext2.grey,
#lbSpacer.grey {
    color: #333333;
}

#lbPrev2.red,
#lbNext2.red,
#lbSpacer.red {
    color: #620000;
}

#lbPrev2.green,
#lbNext2.green,
#lbSpacer.green {
    color: #003300;
}

#lbPrev2.blue,
#lbNext2.blue,
#lbSpacer.blue {
    color: #01379e;
}

#lbPrev2.gold,
#lbNext2.gold,
#lbSpacer.gold {
    color: #666600;
}

#lbPrev2_Off,
#lbNext2_Off {
    font-weight: bold;
}

#lbPrev2_Off.grey,
#lbNext2_Off.grey {
    color: #cccccc;
}

#lbPrev2_Off.red,
#lbNext2_Off.red {
    color: #ffcccc;
}

#lbPrev2_Off.green,
#lbNext2_Off.green {
    color: #82ff82;
}

#lbPrev2_Off.blue,
#lbNext2_Off.blue {
    color: #b7caee;
}

#lbPrev2_Off.gold,
#lbNext2_Off.gold {
    color: #e1e100;
}

#lbDetailsData {
    padding: 0 10px;
}

#lbDetailsData.grey {
    color: #333333;
}

#lbDetailsData.red {
    color: #620000;
}

#lbDetailsData.green {
    color: #003300;
}

#lbDetailsData.blue {
    color: #01379e;
}

#lbDetailsData.gold {
    color: #666600;
}

#lbDetails {
    width: 60%;
    float: left;
    text-align: left;
}

#lbCaption {
    display: block;
    font-weight: bold;
}

#lbNumberDisplay {
    display: block;
    padding-bottom: 1em;
    float: left;
}

#lbNavDisplay {
    display: block;
    padding-bottom: 1em;
    float: left;
}

#lbClose {
    width: 64px;
    height: 28px;
    margin-bottom: 1px;
    float: right;
}

#lbClose.grey {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/close_grey.png")
        no-repeat;
}

#lbClose.red {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/close_red.png")
        no-repeat;
}

#lbClose.green {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/close_green.png")
        no-repeat;
}

#lbClose.blue {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/close_blue.png")
        no-repeat;
}

#lbClose.gold {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/close_gold.png")
        no-repeat;
}

#lbPlay {
    width: 64px;
    height: 28px;
    margin-bottom: 1px;
    float: right;
}

#lbPlay.grey {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/play_grey.png")
        no-repeat;
}

#lbPlay.red {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/play_red.png")
        no-repeat;
}

#lbPlay.green {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/play_green.png")
        no-repeat;
}

#lbPlay.blue {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/play_blue.png")
        no-repeat;
}

#lbPlay.gold {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/play_gold.png")
        no-repeat;
}

#lbPause {
    width: 64px;
    height: 28px;
    margin-bottom: 1px;
    float: right;
}

#lbPause.grey {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/pause_grey.png")
        no-repeat;
}

#lbPause.red {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/pause_red.png")
        no-repeat;
}

#lbPause.green {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/pause_green.png")
        no-repeat;
}

#lbPause.blue {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/pause_blue.png")
        no-repeat;
}

#lbPause.gold {
    background: url("#{basepath.$tuleap-common-theme-basepath}images/lytebox/pause_gold.png")
        no-repeat;
}
/* stylelint-enable */
