/* Mixin styles */

/* Hide text when it's replaced by an image */
.image-replacement {
  overflow: hidden;
  text-indent: 150%;
  white-space: nowrap;
}

/* General styling of nav menu items */
%menu-item {
  text-decoration: none;
  color: transparentize($color_white, 0.2);
  @include ie8 {
    color: $color_white;
  }
  transition: background-color 0.5s ease-out;
  &:hover{
    background-color: darken($color_primary, 15%);
    color: $color_white;
  }

}

/* Selected menu item */
%selected-menu-item {
  font-weight: bold;
  color: $color_primary;
  background-color: $color_neutral_light;
  &:hover{
      background-color: $color_neutral_light;
  }
}

/* General styles */
body{
  background-color: $body-bg;
  color: $body-font-color;
}

.entirebody {
  font-family: $font-family;
}

a {
  &:link,
  &:visited {
    color: $link-color;
  }
  &:hover,
  &:active,
  &:focus {
    color: darken($link-color, 10%);
  }
}

/* Let h1s be a little smaller on small screens */
@media( max-width: $main_menu-mobile_menu_cutoff ){
  h1 {
    font-size: 2em;
  }
}

/* Square corners for text type inputs */
form input[type="text"],
form input[type="password"],
form input[type="search"],
form input[type="email"],
form input[type="url"],
form input[type="tel"],
form input[type="number"] {
    border-radius: 0;
    background-color: $form_input-bg;
    /* Set a fixed height for text inputs in older IE 8 */
    @include ie8{
        height: 2.3125em;
    }
    /* Do the same in px for IE < 7 */
    @include lte-ie7{
        height: 22px;
    }
}

input.use-datepicker[type=text] {
  width: 130px;
  background:image-url('calendar.png') no-repeat 100px 5px $form_input-bg;
}

/* Button styles */

@mixin button-base($size: normal, $disabled: false) {
  padding: 0.5em 1.25em;
  border-radius: 3px;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 300ms ease-out;
  margin-bottom: 0;
  font-family: $font-family;
  @if $size == large {
    font-size: 2.2em;
  }
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
    transition: background-color 300ms ease-out;
  }
  @if $disabled {
    opacity: 0.333;
    transition: none;
    &:hover,
    &:active,
    &:focus {
      background-color: inherit;
      color: inherit;
      cursor: default;
      transition: none;
    }
  }
}

@mixin button-primary($args...) {
  @include button-base($args...);
  color: $color_white;
  background-color: $button-bg;
  border: none;
  &:hover,
  &:active,
  &:focus,
  &:visited:hover,
  &:visited:active,
  &:visited:focus {
    background-color: darken($button-bg, 10%);
    color: $color_white;
  }
}

@mixin button-secondary($args...) {
  @include button-base($args...);
  background-color: desaturate(darken($color_sand, 10%), 5%);
  color: $color_black;
  font-weight: normal;
  &:hover,
  &:active,
  &:focus {
    color: $color_black;
    background-color: desaturate(darken($color_sand, 20%), 5%);
  }
}

@mixin button-tertiary($args...) {
  @include button-base($args...);
  background-color: desaturate(darken($color_sand, 5%), 5%);;
  color: $color_black;
  font-weight: normal;
  border: 1px solid desaturate(darken($color_sand, 15%),5%);
  &:hover,
  &:active,
  &:focus {
    background-color: darken($color_sand, 7.5%);
    border: 1px solid desaturate(darken($color_sand, 25%),5%);
  }
}

form input[type=submit], a.link_button_green, a.link_button_green_large {
  @include button-primary;
  text-decoration: none;
}

a.link_button_green_large {
  @include button-primary($size: large);
}


/* Action Bar Mixins */

@mixin follow-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

@mixin follower-count {
  color: $color_dark_grey;
  padding: 0.56em 1.25em;
  border: 1px solid $color_light_grey;
  position: relative;
  left: -3px;
  line-height: 1.6em;
  border-left: 0;
  border-radius: 3px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Popups */

.popup {
  background-color: desaturate(lighten($notice-color, 30%),10%);
  border: 3px solid $notice-color;
}


/* Header */

#banner_inner {
  background-color: $banner_inner_bg;
}

#topnav {
  background-color: $topnav_bg;
}

.site-title__logo {
  // Smaller logo on mobiles
  width: ($logo-width / 2);
  height: ($logo-height / 2);
  background-size: ($logo-width / 2) ($logo-height / 2);

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    width: $logo-width;
    height: $logo-height;
    background-size: $logo-width $logo-height;
  }
}

#navigation{
  border-bottom: none;
  a {
    @extend %menu-item;
  }
  /* Show which section is currently selected */
  li.selected a{
    @extend %selected-menu-item;
  }

  /* Vertically align the search box */
  #navigation_search{
    input{
      margin-top:0.313em;
      margin-bottom:0.313em;
      height: 1.875em;
      @include ie8 {
        height: 33px;
        font-size: 1.1em;
        padding: 0;
      }
    }
  }

  /* Vertically align the label image for older IE*/
  @include ie8 {
    img {
      margin-top: 0.626em;
    }
  }

  #navigation_search_button{
    background-color: $color_white;
    border: none;
    transition: all 0.3s ease-out;
    color: $color_primary;
    border-radius: 0;
    font-size: inherit;
  }
}

.greeting {
  color: $body-bg;
}
/* Notices, errors */

#notice, #error, .errorExplanation, #request_header_text, #hidden_request, .describe_state_form form, .undescribed_requests, .warning {
  border-top: 10px solid;
  font-size: 1em;
  margin:1em 0;
  padding: 1.5em;

  p:first-child {
    margin-top: 0;
  }

  p:last-child {
    margin-bottom:0;
  }

  ul {
    margin: 0;
  }
}

#notice, #request_header_text {
  background-color: desaturate(lighten($notice-color, 30%),10%);
  border-color: $notice-color;
}

#error, .errorExplanation, #hidden_request, .warning {
  background-color: desaturate(lighten($error-color, 30%),10%);
  border-color: $error-color;

}

.undescribed_requests {
  background-color: desaturate(lighten($action-color, 30%),10%);
  border-color: $action-color;
}

/* Logged and local options act like submenus */
#logged_in_bar{
  @include respond-min($main_menu-mobile_menu_cutoff) {
    top: 0;
  }

  a {
    @extend %menu-item;
    background-color: transparent;
    font-weight: normal;
    color: $color_white;
    &:hover,
    &:active,
    &:focus {
      background-color: transparent;
    }
  }
  #logged_in_links {
    a {
      font-weight: normal;
    }
  }
}

/* LANGUAGE SWITCHER */
#user_locale_switcher {
  background-color: $color_primary;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    background-color: transparent;
  }
}

/* Dropdown list for switching locale */
.locale-list {
  border-bottom: 0;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    position: absolute;
    left: ($logo-width + 40px);
    top: 2.2em;
    right: auto;
  }
  .locale-list-trigger {
    margin-bottom: 0;
    color: $color_white;
    color: transparentize($color_white, 0.8);
    @include respond-min($main_menu-mobile_menu_cutoff) {
      margin-top: 0;
      border: 1px solid desaturate(lighten($color_primary, 5%), 5%);
      border-radius: 3px;
      color: $link-color;
      padding: 0;
    }
  }
}

.locale-list-trigger .current-locale {
  position: relative;
  z-index: 999;
  border-radius: 3px;
  color: $color_white;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    padding: 0.66em 2em 0.66em 0.66em;
  }
}

.locale-list-trigger .current-locale:after {
  display: block;
  position: absolute;
  content: '';
  right: 10px;
  top: 12px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  @include ie8 {
    border-top: 5px solid $color_white;
  }
  border-top: 5px solid transparentize($color_white, 0.6);
}

.locale-list-trigger .current-locale,
.locale-list .available-languages a {
  display: block;
  cursor: pointer;
  font-weight: normal;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    font-size: 0.8125em;
    line-height: 1em;
  }
}

.locale-list .available-languages {
  display: none;
  padding: 0;
  margin-bottom: 0;
  margin-top: 0;
  font-size: 0.8125em;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    position: absolute;
    top: 2em;
    left: 0;
    z-index: 1000;
    border-radius: 3px;
    font-size: 1em;
    min-width: 100%;
  }

}

.locale-list li {
  list-style-type: none;
  border-bottom: 1px solid desaturate(lighten($color_primary, 3%), 5%);
  @include respond-min($main_menu-mobile_menu_cutoff) {
    border-bottom-color: $color_neutral_dark;
    display: block;
  }
  &:last-child {
    @include respond-min($main_menu-mobile_menu_cutoff) {
      border-bottom: 0;
      a {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
    }
  }
}

.locale-list .available-languages a,
.locale-list .available-languages a:link,
.locale-list .available-languages a:visited {
  display: block;
  background-color: $color_primary;
  padding: 0.66em 1em;
  width: 100%;
  text-decoration: none;
  color: transparentize($color_white, 0.2);
  @include ie8 {
    color: $color_white;
  }
  @include respond-min($main_menu-mobile_menu_cutoff) {
    background-color: lighten($color_neutral_dark, 6%);
  }
  transition: background-color 0.5s ease-out;
}

.locale-list .available-languages a:hover,
.locale-list .available-languages a:focus {
  border-bottom: none;
  background-color: darken($color_primary, 5%);
  @include respond-min($main_menu-mobile_menu_cutoff) {
    background-color: $color_neutral_dark
  }
  color: $color_white;

}

/* JS interactivity */
.no-js .locale-list .available-languages,
.locale-list.active .available-languages {
  display: block;
}

.locale-list.active .current-locale {
  background-color: $color_primary;
  color: $color_white;
  border-color: $color_primary;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    background-color: lighten($color_neutral_dark, 6%);
    border-bottom: 1px solid lighten($color_neutral_dark, 2%);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.locale-list.active .current-locale:after {
  @include ie8 {
    border-top-color: $color_white;
  }
  border-top-color: transparentize($color_white, 0.6);
}


.locale-list.active .locale-list-trigger {
  border-color: transparent;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    border-color: $color_neutral_dark;
  }
}


#banner {

  /* Hide the greeting on smaller devices */
  .greeting {
    display: none;
  }

  .rsp_menu_button{
    position: absolute;
    top: 5px; // vertically centre the button in the header
    right: 4px; // 15px for margin minus 9 for background offset
    @extend .image-replacement;
    background-image: image-url('hamburger.png');
    background-repeat: no-repeat;
    background-position: center 10px;
    background-size: 28px 26px;
    width: 44px;
    height: 38px;
    padding: 0;
    /* Make sure clickable area covers image */
    a {
      width: 100%;
      height: 100%;
    }
  }

  &:target {
    .rsp_menu_button {
      top: 5px;
      right: 4px;
    }
  }
}


/* Footer */
#footer {
  background-color: $color_neutral_dark;
  color: darken($color_neutral_light, 10%);
  a {
    text-decoration: none;
    color: $color_white;
    &:hover,
    &:active,
    &:focus {
      color: lighten($color_primary, 10%);
      text-decoration: underline;
    }
  }
}

.footer__about {
  h2 {
    color: $color_white;
  }
}

.footer__final {
  .row {
    border-top: 1px solid lighten($color_neutral_dark, 6%);
  }
}

/* Request page */
.request-header__action-bar__actions {
  .action-menu__button {
    @include button-secondary();
    &:after {
      border-color: #a5a5a5 transparent transparent transparent;
      right: 7%;
    }
  }

  .action-bar__follow-button {
    .track__action {
      @include button-primary();
      @include follow-button();
    }
  }

  .action-bar__follower-count {
    @include follower-count();
  }
}

div.correspondence {
  background-color: $color_white;
  box-shadow: 0 2px 2px transparentize($color_black, 0.8);
  border: none;
  border-radius: 5px;
  margin-bottom: 2em;
}

.incoming.correspondence {
  border-top: 8px solid $color_secondary;
  .correspondence_text a {
    color: $color_secondary;
  }
  a.link_to_this {
    background-color: $color_secondary;
  }
}

.outgoing.correspondence {
  border-top: 8px solid $color_primary;
  a.link_to_this {
    background-color: $color_primary;
  }
}

a.correspondence__header__date,
a.correspondence__header__date:visited {
  color: #777;
}

.describe_state_form input[type="radio"] + label {
  display:inline;
}

a.link_to_this {
  background-image: image-url('link-icon.png');
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
     background-image:image-url('link-icon@2.png');
  }
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

#link_box {
  font-family: $font-family;
  border-radius: 0;
  border: 1px solid $color_neutral_dark;
  .close-button {
    background-color: $color_secondary;
    float: right;
  }
}

.describe_state_form {
  padding: 0;

  form{
    background-color: desaturate(lighten($action-color, 30%),10%);
    border-color: $action-color;
    h2 {
      margin-top: 0;
    }
    hr {
      border-color: $action-color;
    }
  }
}

.sidebar {
  .new-request-cta {
    .new-request__make-new-requests {
      @include button-primary();
    }
  }
}

.feed_link_sidebar .link_button_green {
  @include button-primary();
}

.report-this-request {
  @include button-secondary();
  color: $color_black !important;
  /* Using !important here as a temporary fix for a bad declaration (a:link)
    in Alaveteli core. When this is fixed it can be removed.
  */
}

/* Status lines and icons */
.icon_waiting_classification,
.icon_waiting_response,
.icon_waiting_clarification,
.icon_requires_admin,
.icon_waiting_response_overdue,
.icon_gone_postal,
.icon_error_message,
.icon_internal_review,
.icon_user_withdrawn {
  color: $status-pending;
}

.icon_attention_requested,
.icon_not_held,
.icon_waiting_response_very_overdue,
.icon_failed,
.icon_rejected {
  color: $status-failure;
}

.icon_successful,
.icon_partially_successful {
  color: $status-success;
}

.request-status-message {
  color: $color_black;
}

/* Attachments*/

.view_html_prefix {
  font-family: $font-family;
  background-color: $color_primary;
  color: transparentize($color_white, 0.2);
  @include ie8 {
    color: $color_white;
  }
  a {
    color: $color_white;
  }
  .view_html_logo, .view_html_description {
    padding-top: 1em;
  }
}

#header_right {
  .link_button_green {
    @include button-secondary;
  }
}

/* User page */
#user_photo_on_profile {
  img, #set_photo {
    margin-top:0.5em;
  }
}

/* Help pages */

dt {
  font-weight: 700;
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    font-size: 2em;
    line-height: 1.1em;
  }
}

/* Front page */
/* Drop the extract indentation on small screens */
#frontpage_examples {
  .excerpt {
    padding: 0.2em 0 0 0;
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      padding: 0 0 0 2em;
    }
  }
  p strong a {
    @include button-secondary;
  }
}

/* How it works section */
.steps__list {
  li {
    @include respond-min( $main_menu-mobile_menu_cutoff ){
      width: 33.3333%;
      margin-left: 0 !important;
    }
  }
}

.steps__step-box {
  background-color: $color_white;
  padding: 2em;
  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    min-height: 11em;
  }
  p {
    line-height: 1.5em;
    color: $color_neutral_dark;
  }
}

.steps__step-number {
  height: 3.5em;
  width: 3.5em;
  background-color: $color_primary;
  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
  padding: 1em;
  border-radius: 100%;
  color: $color_white;
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    left: 50%;
    margin-left: -1.75em;
    bottom: -1em;
    top: auto;
  }
}

.learn-more-foi {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    margin-top: 3em;
  }
  a {
    @include button-secondary;
  }
}

.learn-more-foi {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    margin-top: 3em;
  }
  a {
    @include button-secondary;
  }
}

.latest-requests {
  .button-secondary {
    @include button-secondary;
  }
}

/* Authority page */
.authority__header__action-bar {
  .action-bar__follow-button {
    .track_action,
    .link_button_green {
      @include button-secondary();
      @include follow-button();
    }
  }

  .action-bar__follower-count {
    @include follower-count();
  }
}

.authority__body__sidebar form input[type=submit] {
  @include button-secondary();
}

.homepage-hero {
  background-color: $color_neutral_dark;
  background-image: image-url('homepage-background-small.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  color: $color_white;
  padding: 2em 0 5em;
  position: relative;
  @include respond-min($main_menu-mobile_menu_cutoff) {
    padding: 5em 0 8em;
    background-image: image-url('homepage-background.jpg');
  }

  a {
    color: $color_secondary;
    &:hover,
    &:active,
    &:focus {
      color: $color_white;
    }
  }

  .intro__title {
    color: $color_white;
    text-shadow: 0 1px 2px transparentize($color_black, 0.7);
  }

  .new-request__content {
    background-color: $color_neutral_dark;
    border-radius: 5px;
    padding: 1.888888889em;
  }

  .new-request__title {
    color: $color_white;
    font-size: 1.4375em;
    margin: 0 0 0.5em;
  }

  .new-request__description {
    color: transparentize($color_white, 0.2);
    @include ie8 {
      color: $color_white;
    }
  }
  .new-request__make-new-requests {
    @include button-base;
    background-color: desaturate(darken($color_secondary, 10%), 5%);
    color: $color_white;
    &:hover,
    &:active,
    &:focus {
      background-color: darken($color_secondary, 20%);
    }
  }
}