// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

// General buttons


.button,
.button:link,
.button:visited {
    .inline-block;
    .border-radius;
    box-shadow: @buttonShadow;
    background-color: @buttonBlue;
    #gradient > .vertical(@buttonBlue, @buttonBlueDark);
    color: @buttonTextColor;
    text-align: center;
    font-size: @baseFontSize;
    font-weight: bold;
    padding: (@baseLine / 4) (@baseLine / 2);
    line-height: 1.1;
    text-decoration: none;
    min-width: 80px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    .open-sans;
    .transition();

    &:hover,
    &.hover,
    &:focus,
    &.focus {
        .box-shadow(@buttonShadowHover);
        color: @buttonTextColor;
        text-decoration: none;
        .transition();
    }

    &:focus,
    &.focus {
        outline-color: @textColorSecondary;
        .box-shadow(@buttonShadowFocus);
    }

    &:active,
    &.active {
        .box-shadow(@buttonShadowActive);
        color: @buttonTextColor;
        text-decoration: none;
        .transition();
    }

    &.insensitive,
    &.insensitive:hover,
    &.insensitive:focus {
        background-color: #9ca3aa;
        #gradient > .vertical(#bfc7cd, #9ca3aa);
        .box-shadow(@buttonShadow);
        color: #eee;
    }
}

.button-green,
.button-green:link,
.button-green:visited {
    .button;
    background-color: @buttonGreen;
    #gradient > .vertical(@buttonGreen, @buttonGreenDark);

    &:hover {
        .button-hover-box-shadow(@buttonGreen);
    }

    &:focus {
        .button-focus-box-shadow(@buttonGreen);
    }
}

.button-negative,
.button-negative:link,
.button-negative:visited {
    .button;
    background-color: #a91300;
    #gradient > .vertical(#da5132, #a91300);

    &:hover {
        .button-hover-box-shadow(#da5132);
    }

    &:focus {
        .button-focus-box-shadow(#da5132);
    }
}

.button-white,
.button-white:link,
.button-white:visited {
    .button;
    border: 1px solid #d0d0d0;
    background: #fff;
    padding: (@baseLine / 5) @baseFontSize * 0.75;
    color: @textColorSecondary;
    font-size: @baseFontSize * 0.75;
    font-weight: normal;
    text-shadow: none;
    @shadow: 0 0 12px rgba(230,230,230,0.2) inset, 0 -2px #e8e8e8 inset;
    .box-shadow(@shadow);
    .border-radius(6px);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled=false)";

    &:hover,
    &:focus {
        color: @textColorSecondary;
        .box-shadow(@shadow);
    }
}

.button-white.selected {
    background: #d7d5d5;
    border-color: #bcb9b9;
    text-shadow: 0 1px #fff;
    @shadow: 0 1px 1px rgba(255,255,255,0.75), 0 1px 3px rgba(0,0,0,0.1) inset;
    .box-shadow(@shadow);
}

.button,
.button-white {
    cursor: pointer;
    small {
        display: block;
    }

}

.button.arrow span,
.button-blue.arrow span,
.button-white.arrow span {
  display: block;
  margin-right: -12px;
  padding: 0 30px 0 0;
  background: url(/static/img/sandstone/buttons/arrow-go-r.png) right center no-repeat;
}

.button-sand,
.button-sand:link,
.button-sand:visited {
    .button;
    #gradient > .vertical(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.4) rgba(0,0,0,0.1);
    @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
              1px  0   0 0 rgba(255,255,255,0.5) inset,
             -1px  0   0 0 rgba(255,255,255,0.5) inset,
              0   -2px 0 0 rgba(0,0,0,0.1)       inset;
    .box-shadow(@shadow);
    color: @linkBlue;
    text-shadow: none;
    &:hover,
    &:focus {
        .button-hover-box-shadow();
        color: @linkBlueHover;
    }
}

.button-list {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    // Font size set to 0 on UL and reset to body size on the LI tags
    // This avoids putting a horizontal space between inline-block links
    font-size: 0;
    li {
        font-size: @baseFontSize;
        margin: 0;
        padding: 0;
        list-style-style: none;
        .inline-block;
        .button-sand {
            border-radius: 0;
            border-left-width: 0;
            @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
                     -1px  0   0 0 rgba(255,255,255,0.5) inset,
                      0   -2px 0 0 rgba(0,0,0,0.1)       inset;
            .box-shadow(@shadow);
            min-width: 0;
        }
        &:first-child {
            .button-sand {
                border-top-left-radius: 0.25em;
                border-bottom-left-radius: 0.25em;
                border-left-width: 1px;
                @shadow:  0    1px 0 0 rgba(255,255,255,0.5) inset,
                          1px  0   0 0 rgba(255,255,255,0.5) inset,
                         -1px  0   0 0 rgba(255,255,255,0.5) inset,
                          0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                .box-shadow(@shadow);
                &:hover,
                &:focus {
                    .button-hover-box-shadow();
                }
            }
        }
        &:last-child {
            .button-sand {
                border-top-right-radius: 0.25em;
                border-bottom-right-radius: 0.25em;
            }
        }
    }
}

.dark {
    .button-sand,
    .button-sand:link,
    .button-sand:visited {
        @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                  1px  0   0 0 rgba(255,255,255,0.2) inset,
                 -1px  0   0 0 rgba(255,255,255,0.2) inset,
                  0   -2px 0 0 rgba(0,0,0,0.1)       inset;
        .box-shadow(@shadow);
        &:hover,
        &:focus {
            .button-hover-box-shadow(rgba(255,255,255,0.2));
            color: @linkBlue;
        }
    }
    .button-list {
        li {
            .button-sand {
                @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                         -1px  0   0 0 rgba(255,255,255,0.2) inset,
                          0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                .box-shadow(@shadow);
            }
            &:first-child {
                .button-sand {
                    @shadow:  0    1px 0 0 rgba(255,255,255,0.2) inset,
                              1px  0   0 0 rgba(255,255,255,0.2) inset,
                             -1px  0   0 0 rgba(255,255,255,0.2) inset,
                              0   -2px 0 0 rgba(0,0,0,0.1)       inset;
                    .box-shadow(@shadow);
                    &:hover,
                    &:focus {
                        .button-hover-box-shadow(rgba(255,255,255,0.2));
                        color: @linkBlue;
                    }
                }
            }
        }
    }
}



// Product download buttons

.download-button .unrecognized-download,
.download-button .unsupported-download {
    display: none;
}

.download-button {
    .inline-block;
    ul {
        margin: 0;
        li {
            list-style-type: none;
            margin: 0;
        }
    }
}

.download-button .download-link {
    .button-green;
    cursor: pointer;
    padding: 0;
    margin-left: 54px;
    width: 220px;
    /* for IE6 */
    _margin-left: 0;
    _width: 294px;
    text-align: left;
    font-weight: normal;
    line-height: @baseLine;
    font-size: 16px;
    .border-radius(6px);
    .download-content {
        display: block;
        position: relative;
        color: #b8e779;
        margin-left: -54px;
        _margin-left:0;
        background: url(/static/img/sandstone/buttons/firefox-large.png?2013-06) 0 0 no-repeat;
        _background-color: @buttonGreenDark;
        min-height: 82px;
        margin-bottom: -12px;
        _margin-bottom: 0;
        padding: 10px 12px 16px 119px;
    }
    .download-title,
    .download-title span {
        display: block;
        color: #fff;
        font-size: 30px;
        font-weight: normal;
        letter-spacing: -0.02em;
        padding-top: 8px;
        margin-bottom: 10px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    .download-title span {
        padding-top: 0;
        margin-bottom: 5px;
    }
    .download-subtitle {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }
    .download-lang {
        display: block;
        color: #346012;
        padding-top: 2px;
        font-size: 11px;
        line-height: 100%;
        text-shadow: 0 1px rgba(255,255,255,0.2);
    }
    .download-platform {
        display: none;
    }
}

.download-button-small .download-link {
    margin-left: 44px;
    width: 230px;
    /* for IE6 */
    _margin-left: 0;
    _width: 274px;
    .download-content {
        margin-left: -34px;
        _margin-left:0;
        margin-top: -2px;
        margin-bottom: -7px;
        background-image: url(/static/img/sandstone/buttons/firefox-small.png?2013-06);
        min-height: 45px;
        padding: 10px 20px 10px 73px;
        overflow: visible;
        font-size: @smallFontSize;
        .border-radius(6px);
    }
    .download-title {
        font-size: 22px;
        padding-top: 0;
        margin-bottom: 0;
    }
    .download-lang {
        position: absolute;
        top: 20px;
        right: 10px;
        text-align: right;
        width: 100px;
    }
}

.download-button-beta.download-button-small .download-link .download-lang,
.download-button-aurora.download-button-small .download-link .download-lang {
    top: 33px;
}

.download-button-beta,
.download-button-aurora {
    .download-link .download-title,
    .download-link .download-title span {
        font-size: 24px;
    }
}

.download-button-beta.download-button-small,
.download-button-aurora.download-button-small {
    .download-link .download-title,
    .download-link .download-title span {
        font-size: 20px;
    }
}

.download-button.download-button-beta.download-button-small .download-list .os_android,
.download-button.download-button-aurora.download-button-small .download-list .os_android,
.download-button.download-button-mobile.download-button-aurora.download-button-small,
.download-button.download-button-mobile.download-button-beta.download-button-small {
    .download-link .download-title span {
        font-size: 18px;
        letter-spacing: -0.01em;
    }
}

.download-button-large.beta .download-link .download-content {
  background-image: url(/static/img/sandstone/buttons/beta-large.png?2013-06);
}

.download-button-small.beta .download-link .download-content {
  background-image: url(/static/img/sandstone/buttons/beta-small.png?2013-06);
}

.download-button-large.aurora .download-link .download-content {
  background-image: url(/static/img/sandstone/buttons/aurora-large.png?2013-06);
}

.download-button-small.aurora .download-link .download-content {
  background-image: url(/static/img/sandstone/buttons/aurora-small.png?2013-06);
}

.download-button.download-button-noicon {
    .download-link {
        width: 250px;
        margin-left: auto;
        .download-content {
            margin-left: auto;
            padding-left: 55px;
            background-image: url(/static/img/sandstone/buttons/download-arrow.png);
            background-position: 15px 30px;
        }
        .download-subtitle {
            margin-right: auto;
        }
    }
}

.download-button-noicon .download-list .os_android,
.download-button-mobile.download-button-noicon {
    .download-link .download-title span {
        padding-top: 7px;
    }
}

.download-button-small.download-button-noicon {
    .download-link {
        .download-content {
            background-image: url(/static/img/sandstone/buttons/download-arrow-small.png);
            background-position: 15px 18px;
        }
    }
}

.download-button-small.download-button-noicon .download-list .os_android,
.download-button-small.download-button-mobile.download-button-noicon {
    .download-link .download-title span {
        padding-top: 0;
    }
}


// OS detection

.download-button .os_linux,
.download-button .os_linux64,
.linux.x86.x64 .download-list .os_linux,
.download-button .os_windows,
.download-button .os_osx,
.download-button .os_android,
.no-js .download-list,
.other .download-list {
    display: none !important;
}

.linux .download-button .os_linux,
.linux.x86.x64 .download-button .os_linux64,
.windows .download-button .os_windows,
.osx .download-button .os_osx,
.android .download-button .os_android,
.download-button-mobile .os_android,
.android .download-button-desktop .download-list,
.android .download-button-desktop small.os_windows,
.no-js .download-button-mobile .download-list,
.other .download-button-mobile .download-list,
.other .download-button small.os_windows {
    display: block !important;
}

.ios .download-button .unsupported-download,
.oldwin .download-button .unsupported-download,
.oldmac .download-button .unsupported-download {
    display: block;
    max-width: 250px;
}

// Small print

.download-button small.download-other,
.other .download-button-mobile small.download-other,
.android .download-button-desktop small.download-other {
    .open-sans;
    display: block;
    font-size: 11px;
    text-align: center;
    margin-top: 6px;
    color: @textColorLight;

    a:link,
    a:visited {
        color: #999;
    }
}

.no-js .download-button small.download-other,
.other .download-button small.download-other,
.android .download-button-desktop small.download-other {
    text-align: left;
}

.other .download-button,
.android .download-button-desktop {
    .unrecognized-download {
        display: block;
    }
}

.download-button .download-dumb {
    text-align: left;
    h4 {
        text-shadow: none;
        margin: 0 0 6px 0;
        font-size: 18px;
    }
    ul li {
        display: inline;
    }

    small {
        font-size: 11px;
        letter-spacing: normal;
    }
    .button-green {
        padding-left: 6px;
        padding-right: 6px;
        margin-left: 3px;
        margin-bottom: 3px;
    }

}

// Mobile download buttons

.download-button .download-list .os_android,
.download-button-mobile {
    .download-link {
       .download-title {
            padding-top: 0;
            margin-bottom: 5px;
            font-size: 16px;
            color: #346012;
            text-shadow: 0 1px rgba(255, 255, 255, 0.2);
        }
        .download-subtitle {
            display: block;
            position: static;
            text-align: left;
            margin-right: 40px;
            color: #fff;
            font-size: 11px;
            line-height: 1.2;
            letter-spacing: normal;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        }
    }
}

.download-button.download-button-small .download-list .os_android,
.download-button.download-button-small.download-button-mobile {
    .download-link {
       .download-title {
            padding-top: 0;
            margin-bottom: 5px;
            font-size: 13px;
            color: #346012;
            text-shadow: 0 1px rgba(255, 255, 255, 0.2);
            letter-spacing: normal;
            span {
                font-size: 22px;
                margin-bottom: 0;
            }
        }
        .download-subtitle {
            position: absolute;
            top: 15px;
            right: 10px;
            text-align: right;
            width: 100px;
            margin-right: 0;
        }
    }
}

/* {{{ l10n tweaks */

html[lang="nl"],
html[lang="el"] {
    .download-button.download-button-beta.download-button-mobile.download-button-small,
    .download-button.download-button-small .download-list .os_android {
        .download-subtitle {
            width: 85px;
        }
    }
}

/* }}} */
