/**
 *  If you want to override some bootstrap variables, you have to change values here.
 *  The list of variables are listed here bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss
 */
// $navbar-inverse-link-color: #5AADBB;
$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";


/**
 *  Do not remove this comments bellow. It's the markers used by wiredep to inject
 *  sass dependencies when defined in the bower.json of your dependencies
 */
// bower:scss
// endbower

// -------------
// Variables
// -------------

$gray: #f1f1f1;
$defaultblue: #5E749D;

// -------------

$categories: (
    saude: #3359a7,
    seguranca-publica: #e95052,
    educacao: #cc6cd9,
    reducao-da-pobreza: #38c7a4,
    cultura: #a63738,
    esporte: #f15b31,
    meio-ambiente: #3cc667,
    cidades: #3f5fac,
    empreendedorismo: #79654f
);

$categories-complementary-1: (
    saude: #4f8add,
    seguranca-publica: #fb7c7f,
    educacao: #ee9cff,
    reducao-da-pobreza: #57e9cd,
    cultura: #dc5557,
    esporte: #fd8d4c,
    meio-ambiente: #339950,
    cidades: #21275b,
    empreendedorismo: #000
);

$categories-complementary-2: (
    saude: #2a4781,
    seguranca-publica: #c43e3e,
    educacao: #93549e,
    reducao-da-pobreza: #2a9677,
    cultura: #862f2f,
    esporte: #ce472c,
    meio-ambiente: lighten(#3cc667, 10%),
    cidades: lighten(#3f5fac, 10%),
    empreendedorismo: #000
);

// $categories-descriptions: (
//     saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.",
//     seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.",
//     educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.",
//     reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.",
//     cultura: "O que nos singulariza no conjunto das nações é, em última instância, nossa cultura. É por ela que nos identificamos como brasileiros de norte a sul deste país. Uma grande nação precisa ter um desenvolvimento cultural à altura de sua grandeza, contemplando as dimensões simbólica, econômica e cidadã da cultura, que são parte central do projeto de um país democrático e plural. A pluralidade é nossa singularidade.");

// Programs
$scale: 1.1;
$time: .2s;
$darken: 15%;

// -------------

body {
    font-family: "Open Sans", sans-serif;
    &.contraste {
        color: #fff !important;
        background-color: #000 !important;

        a,
        .btn {
            color: #ff0 !important;
            background-color: #000 !important;
            text-decoration: underline !important;
        }
    }
}

// Form
.input-group-search {
    .icon-circle {
        color: #fff;
        padding: 5px;
        margin-top: -5px;

        &.icon-small {
          width: 35px;
          height: 35px;
        }
    }
    button {
        border-left: none;
    }
}

// Header
.section--articles {
    .header {
        position: relative;

        button {
            position: absolute;
            right: 0;
            top: 2px;

            @media screen and (max-width: $screen-sm) {
                position: relative;
                padding-left: 0;
            }
        }
    }
}

// Commons
.button--themed {
    // padding: 20px;
    .btn {
        color: #fff;
        font-weight: bold;
        padding: 15px 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-radius: 6px;
        @each $category,
          $color in $categories {
            .#{$category} & {
              background-color: $color;
              border-bottom: 3px solid darken( $color, 10% );
            }
          }

        -webkit-transition: all $time ease-in-out;
        -moz-transition: all $time ease-in-out;
        -o-transition: all $time ease-in-out;
        transition: all $time ease-in-out;

        &:hover,
        &:focus {
          @each $category,
          $color in $categories {
            .#{$category} & {
              background-color: darken( $color, 10% );
            }
          }
        }

        .contraste & {
            color: #262626;
            background-color: #fff;
        }
    }

    .btn-circle {
        width: 64px;
        height: 64px;
        border-radius: 100%;
    }

    // &.vote-buttons {
    //     padding-bottom: 40px;
    // }

    .btn.vote-buttons-up {
        float: right;
        margin-right: 10px;
        background-color: #32dbb5;
        border-bottom: 3px solid #1da485;

        &:hover,
        &:focus {
            background-color: #1da485;
        }
    }

    .btn.vote-buttons-down {
        float: left;
        margin-left: 10px;
        background-color: #db4127;
        border-bottom: 3px solid #9c2d1a;

        &:hover,
        &:focus {
            background-color: #9c2d1a;
        }


        // @media (max-width: $screen-sm) {
        //     margin-left:
        // }
    }

    .vote-buttons-up,
    .vote-buttons-down {
        font-size: 30px;
        margin-bottom: 20px;
    }
}



.img-mask--background {
    width: 100%;
    height: 100%;
    text-align: center;

    .icon-circle{
        position: absolute;
        left: 50%;
        margin-left: -15px;
        bottom: -10px;
        width: 31px;
        height: 31px;
    }

    .glyphicon {
        position: relative;
        top: -2px;
        color: #fff;
        background-color: #3FC869;
        padding: 6px 5px 5px 6px;
        border-radius: 100%;
    }

    .icon-programa-respondido {
        transform: scale(0.8);
    }
}

.icon {
    display: inline-block;
    vertical-align: middle;
}

.icon-wrapper-rounded {
    padding: 3px;
    border-radius: 100%;
}

.icon-circle {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    font-size: 20px;
    text-align: center;
    // border: 1px solid #eee;
    border-radius: 100%;
    overflow: hidden;

    &.icon-small {
        width: 40px;
        height: 40px;

        .icon {
            position: relative;
            top: -8px;
            left: -8px;
        }
    }

    .vote_for &,
    .skip &,
    .vote_against & {
        padding-top: 12px;
    }

    .vote_for & {
        background-color: #4AC97A;

        &:hover { background-color: lighten(#4AC97A, 10%); }

        &:active,
        &:focus { background-color: darken(#4AC97A, 10%)}
    }
    .skip & {
        background-color: #EEB453;

        &:hover { background-color: lighten(#EEB453, 10%); }

        &:active,
        &:focus { background-color: darken(#EEB453, 10%)}
    }
    .vote_against & {
        background-color: #EC4C68;

        &:hover { background-color: lighten(#EC4C68, 10%); }

        &:active,
        &:focus { background-color: darken(#EC4C68, 10%)}
    }
}

.icon-circle-social-facebook {background-color: #537ab5; }
.icon-circle-social-twitter {background-color: #77cbef; }
.icon-circle-social-googleplus {background-color: #d23b00; }
.icon-circle-social-whatsapp {background-color: #10ad08; }
.icon-circle-social-youtube {background-color: #c63635; }
.icon-circle-social-flickr {background-color: #eaeaea; }
.icon-circle-mail {background-color: #ecb24e; }

// Theme
@each $category, $color in $categories {
    .#{$category} {
        .color-theme-fg {
          color: $color;
          margin-top: 0px;
         }
        .color-theme-bg { background-color: $color;}
        .color-theme-bg-complementar-1 { background-color: map-get($categories-complementary-1, $category);}
        .color-theme-bg-complementar-2 { background-color: map-get($categories-complementary-2, $category);}
        .img-mask--background { background-color: fade-out($color, 0.5); }

        .contraste & .color-theme-fg { color: #fff; }
        .contraste & .color-theme-bg { background-color: #000;}
        .contraste & .color-theme-bg-complementar-1 { background-color: #111; outline: 1px solid #eee;}
        .contraste & .color-theme-bg-complementar-2 { background-color: #222; outline: 1px solid #ddd;}
    }
}

$common-color: #5E739E;
.color-theme-common-fg {color: $common-color; }
.color-theme-common-bg {background-color: $common-color; }
.color-fg-white {color: #fff; }
.color-bg-white {background-color: #fff; }
.color-fg-gray {color: #ccc; }
.color-bg-gray {background-color: #ccc; }

// Contraste
.contraste {
    .color-theme-common-fg {color: #fff; }
    .color-theme-common-bg {background-color: #000; }
    .contraste-box {background-color: #000; border: 1px solid #fff;}
}


// Hack to fix "Barra do Brasil"
#barra-brasil .brasil-flag {
  height: 33px !important;
}

#barra-brasil ul.list {
    z-index: 9999 !important;
}

/**
 *  Do not remove this comments bellow. It's the markers used by gulp-inject to inject
 *  all your sass files automatically
 */
// injector
// endinjector


// blockquote {
//     position:relative;
// }

// blockquote:before {
//     content:"\0393";
//     font-size: 50px;
//     display: block;
//     position: absolute;
//     top: 0;
//     left: 0.
// }