<commit_before>/* 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 {
  color: $color_white;

  &:hover,
  &:active,
  &:focus {
    background-color: darken($color_primary, 15%);
    color: $color_white;
  }
}

/* Selected menu item */
%selected-menu-item {
  color: $color_white;
  background-color: darken($color_primary, 15%);

  &:hover,
  &:active,
  &:focus {
    background-color: darken($color_primary, 15%);
  }
}

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

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

a {
  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: mix($color_asktheeu_green, #f3f3f3, 12%);
  color: $color_black;
  font-weight: normal;
  &:hover,
  &:active,
  &:focus {
    color: $color_black;
    background-color: darken(mix($color_asktheeu_green, #f3f3f3, 12%), 10%);
  }
}

@mixin button-tertiary($args...) {
  @include button-base($args...);
  background-color: desaturate(darken($color_neutral_light, 5%), 5%);
  color: $color_black;
  font-weight: normal;
  border: 1px solid desaturate(darken($color_neutral_light, 15%),5%);
  &:hover,
  &:active,
  &:focus {
    background-color: darken($color_neutral_light, 7.5%);
    border: 1px solid desaturate(darken($color_neutral_light, 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);
}

/* Popups */

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


/* Header */

#banner {
  // Fill the header with a gradient background, then cover up most of it
  // with the solid green background of #banner_inner (this has much better
  // browser support than a border-image gradient)
  background: darken($banner_inner_bg, 10%);
  background: -webkit-linear-gradient(left, $color_asktheeu_green 0%, $color_asktheeu_yellow 50%, $color_asktheeu_blue 100%);
  background: linear-gradient(to right, $color_asktheeu_green 0%, $color_asktheeu_yellow 50%, $color_asktheeu_blue 100%);
  padding-top: 0.5em;

  .rsp_menu_button {
    position: absolute;
    top: 22px; // vertically centre the button in the header
    right: 10px;
    @extend .image-replacement;
    background: transparent image-url('hamburger@2.png') no-repeat center center;
    background-size: 28px 28px;
    width: 44px;
    height: 40px;
    padding: 0;

    /* Make sure clickable area covers image */
    a {
      width: 100%;
      height: 100%;
    }
  }

  &:target {
    .rsp_menu_button {
      top: 22px;
      right: 10px;
    }
  }

  .banner_site-title {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}

#banner_inner {
  background-color: $banner_inner_bg;

  a, a:link {
    text-decoration: none;
  }
}

.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;
  }
}

// Override stupid id selector in core styles
.navigation {
  border-bottom: none;

  a, a:link {
    text-decoration: none;
    @extend %menu-item;
  }

  .selected {
    a, a:link {
      @extend %selected-menu-item;
    }
  }

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-right: 0;
    a {
      line-height: 1em;
      padding: 1em;
    }
  }
}

#logged_in_bar {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-top: 0.5em;
    width: 41%;
  }
}

.js-loaded .account-link {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    float: right;
  }
}

.js-loaded .logged-in-menu {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    top: 3em;
  }
}

#navigation_search {
  input {
    font-size: 1em;
    border-radius: 0.2em 0 0 0.2em;
    border: none;
  }

  button[type="submit"] {
    padding: 2em 0 0 0;
    border-radius: 0 0.2em 0.2em 0;

    background: darken($color_asktheeu_green, 20%) image-url('search.png') no-repeat 50% 50%;
    background-size: 20px 20px;
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      background-image: image-url('search@2.png');
    }
    background-image: image-url('search.svg'), none;

    &:hover,
    &:active,
    &:focus {
      background-color: darken($color_asktheeu_green, 30%);
    }
  }

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-top: 0.75em;
  }
}

#user_locale_switcher {
  margin: 0;
  padding: 0;

  p {
    margin: 0;
    padding: 0;
  }

  a, span {
    display: block;
    padding: 0.5em 1em;
  }

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-right: 1.5%; // same as grid column padding
    padding-top: 0.5em; // move it away from the top of the header

    a { font-weight: bold; }

    a, span {
      padding: 0.5em 0.4em;
    }

    ul {
      float: right;

      li {
        float: left;
      }
    }
  }
}

.locale-list {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    width: 66%;
    float: right;
  }
}


/* 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,
  h1:first-child {
    margin-top: 0;
  }

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

  ul {
    margin: 0;
  }
}

#notice, #request_header_text {
  background-color: mix($notice-color, #f3f3f3, 12%);
  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;
}

.share-link {
  margin-right: 0.4em;
}

.annotation-reminder {
  margin-top: 1.5em;
  max-width: 34em;
}


/* Footer */
#footer {
  background-color: $color_neutral_dark;
  color: mix(#fff, $color_neutral_dark, 60%);

  a {
    text-decoration: none;
    color: $color_white;

    &:hover,
    &:active,
    &:focus {
      color: $color_asktheeu_yellow;
      text-decoration: underline;
    }
  }
}

.footer__about {
  float: none;
  width: 100% !important; // override the various grid-column() breakpoints in _footer_layout.scss
  @include clearfix();
}

.footer__about,
.footer__links,
.footer__legal {
  width: 100%;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;

  p {
    line-height: 1.3em; // to go with the default 0.875em font-size
  }
}

.footer__logo {
  float: left;
  @extend .image-replacement;
  width: 100px;
  height: 66px;
  background: #E12625 image-url('access-info-logo.png') 0 0 no-repeat;
  background-image: image-url('access-info-logo.svg'), none;
  background-size: 100px 66px;
}

.footer__byline {
  padding-left: 100px + 20px; // make space for floated logo
}

// Main "A project by…" text
p.footer__credit {
  margin-top: -0.2em; // line up top of text with top of logo
  margin-bottom: 0.5em;
  font-size: 1.2em;
}

// Their contact details
.footer__contact {
  p {
    margin-bottom: 0.2em;
  }
}

@include respond-min( $main_menu-mobile_menu_cutoff ){
  .footer__contact {
    @include clearfix();
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    width: 100%;
  }

  .footer__contact__addresses {
    @include grid-column(6);
  }

  .footer__contact__phone {
    @include grid-column(3);
  }
}

.about__contact-links {
  margin: 1em 0 0.8em 0;
  font-size: 1em; // rather than 0.875em;

  & > li {
    margin: 0 1em 0 0;
  }
}

.footer__legal {
  p {
    max-width: 40em;
  }
}

.frontpage-photo-attribution {
  display: none;

  .front & {
    display: block;
  }
}

.footer__final {
  .row {
    border-top: none;
  }
}

.final__social-links {
  ul {
    li {
      @media (min-width: 32em) {
        float: left;
      }
    }
  }
}

/* Add more breathing room between sidebars and main ("left") columns */

@include respond-min( $main_menu-mobile_menu_cutoff ){
  #left_column,
  .authority__body__foi-results,
  #authority_selection {
    padding-right: 3em;
  }

  #left_column_flip {
    padding-left: 3em;
  }
}

/* Request page */

#right_column {
  margin-top: 0;
}

#request_show {
  margin-top: 1em;
}

#request_status {
  margin-bottom: 2em;
  border-radius: 5px;
}

div.correspondence {
  background-color: $color_sand;
  border: none;
  border-radius: 5px;
  margin-bottom: 2em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); // box-shadow to avoid weird border bevel next to 8px border-top

  .correspondence__header {
    background-color: transparent;
    border-bottom: none;
  }

  .correspondence__header__from,
  .correspondence__header__from--with-delivery-status {
    font-weight: bold;
  }

  .correspondence__footer {
    background-color: transparent;
  }
}

.outgoing.correspondence {
  border-top: 8px solid $color_asktheeu_yellow;
  background-color: mix($color_asktheeu_yellow, #fff, 8%);
}

.incoming.correspondence {
  border-top: 8px solid $color_asktheeu_blue;
  background-color: mix($color_asktheeu_blue, #fff, 8%);
}

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

a.link_to_this {
  background: $color_primary image-url('link-icon.png') center center no-repeat;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
     background-image:image-url('link-icon@2.png');
  }
  background-size: 14px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}
<commit_msg>Update collapsable correspondence headers styling<commit_after>/* 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 {
  color: $color_white;

  &:hover,
  &:active,
  &:focus {
    background-color: darken($color_primary, 15%);
    color: $color_white;
  }
}

/* Selected menu item */
%selected-menu-item {
  color: $color_white;
  background-color: darken($color_primary, 15%);

  &:hover,
  &:active,
  &:focus {
    background-color: darken($color_primary, 15%);
  }
}

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

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

a {
  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: mix($color_asktheeu_green, #f3f3f3, 12%);
  color: $color_black;
  font-weight: normal;
  &:hover,
  &:active,
  &:focus {
    color: $color_black;
    background-color: darken(mix($color_asktheeu_green, #f3f3f3, 12%), 10%);
  }
}

@mixin button-tertiary($args...) {
  @include button-base($args...);
  background-color: desaturate(darken($color_neutral_light, 5%), 5%);
  color: $color_black;
  font-weight: normal;
  border: 1px solid desaturate(darken($color_neutral_light, 15%),5%);
  &:hover,
  &:active,
  &:focus {
    background-color: darken($color_neutral_light, 7.5%);
    border: 1px solid desaturate(darken($color_neutral_light, 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);
}

/* Popups */

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


/* Header */

#banner {
  // Fill the header with a gradient background, then cover up most of it
  // with the solid green background of #banner_inner (this has much better
  // browser support than a border-image gradient)
  background: darken($banner_inner_bg, 10%);
  background: -webkit-linear-gradient(left, $color_asktheeu_green 0%, $color_asktheeu_yellow 50%, $color_asktheeu_blue 100%);
  background: linear-gradient(to right, $color_asktheeu_green 0%, $color_asktheeu_yellow 50%, $color_asktheeu_blue 100%);
  padding-top: 0.5em;

  .rsp_menu_button {
    position: absolute;
    top: 22px; // vertically centre the button in the header
    right: 10px;
    @extend .image-replacement;
    background: transparent image-url('<EMAIL>') no-repeat center center;
    background-size: 28px 28px;
    width: 44px;
    height: 40px;
    padding: 0;

    /* Make sure clickable area covers image */
    a {
      width: 100%;
      height: 100%;
    }
  }

  &:target {
    .rsp_menu_button {
      top: 22px;
      right: 10px;
    }
  }

  .banner_site-title {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}

#banner_inner {
  background-color: $banner_inner_bg;

  a, a:link {
    text-decoration: none;
  }
}

.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;
  }
}

// Override stupid id selector in core styles
.navigation {
  border-bottom: none;

  a, a:link {
    text-decoration: none;
    @extend %menu-item;
  }

  .selected {
    a, a:link {
      @extend %selected-menu-item;
    }
  }

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-right: 0;
    a {
      line-height: 1em;
      padding: 1em;
    }
  }
}

#logged_in_bar {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-top: 0.5em;
    width: 41%;
  }
}

.js-loaded .account-link {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    float: right;
  }
}

.js-loaded .logged-in-menu {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    top: 3em;
  }
}

#navigation_search {
  input {
    font-size: 1em;
    border-radius: 0.2em 0 0 0.2em;
    border: none;
  }

  button[type="submit"] {
    padding: 2em 0 0 0;
    border-radius: 0 0.2em 0.2em 0;

    background: darken($color_asktheeu_green, 20%) image-url('search.png') no-repeat 50% 50%;
    background-size: 20px 20px;
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      background-image: image-url('search@2.png');
    }
    background-image: image-url('search.svg'), none;

    &:hover,
    &:active,
    &:focus {
      background-color: darken($color_asktheeu_green, 30%);
    }
  }

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-top: 0.75em;
  }
}

#user_locale_switcher {
  margin: 0;
  padding: 0;

  p {
    margin: 0;
    padding: 0;
  }

  a, span {
    display: block;
    padding: 0.5em 1em;
  }

  @include respond-min( $main_menu-mobile_menu_cutoff ){
    padding-right: 1.5%; // same as grid column padding
    padding-top: 0.5em; // move it away from the top of the header

    a { font-weight: bold; }

    a, span {
      padding: 0.5em 0.4em;
    }

    ul {
      float: right;

      li {
        float: left;
      }
    }
  }
}

.locale-list {
  @include respond-min( $main_menu-mobile_menu_cutoff ){
    width: 66%;
    float: right;
  }
}


/* 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,
  h1:first-child {
    margin-top: 0;
  }

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

  ul {
    margin: 0;
  }
}

#notice, #request_header_text {
  background-color: mix($notice-color, #f3f3f3, 12%);
  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;
}

.share-link {
  margin-right: 0.4em;
}

.annotation-reminder {
  margin-top: 1.5em;
  max-width: 34em;
}


/* Footer */
#footer {
  background-color: $color_neutral_dark;
  color: mix(#fff, $color_neutral_dark, 60%);

  a {
    text-decoration: none;
    color: $color_white;

    &:hover,
    &:active,
    &:focus {
      color: $color_asktheeu_yellow;
      text-decoration: underline;
    }
  }
}

.footer__about {
  float: none;
  width: 100% !important; // override the various grid-column() breakpoints in _footer_layout.scss
  @include clearfix();
}

.footer__about,
.footer__links,
.footer__legal {
  width: 100%;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;

  p {
    line-height: 1.3em; // to go with the default 0.875em font-size
  }
}

.footer__logo {
  float: left;
  @extend .image-replacement;
  width: 100px;
  height: 66px;
  background: #E12625 image-url('access-info-logo.png') 0 0 no-repeat;
  background-image: image-url('access-info-logo.svg'), none;
  background-size: 100px 66px;
}

.footer__byline {
  padding-left: 100px + 20px; // make space for floated logo
}

// Main "A project by…" text
p.footer__credit {
  margin-top: -0.2em; // line up top of text with top of logo
  margin-bottom: 0.5em;
  font-size: 1.2em;
}

// Their contact details
.footer__contact {
  p {
    margin-bottom: 0.2em;
  }
}

@include respond-min( $main_menu-mobile_menu_cutoff ){
  .footer__contact {
    @include clearfix();
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    width: 100%;
  }

  .footer__contact__addresses {
    @include grid-column(6);
  }

  .footer__contact__phone {
    @include grid-column(3);
  }
}

.about__contact-links {
  margin: 1em 0 0.8em 0;
  font-size: 1em; // rather than 0.875em;

  & > li {
    margin: 0 1em 0 0;
  }
}

.footer__legal {
  p {
    max-width: 40em;
  }
}

.frontpage-photo-attribution {
  display: none;

  .front & {
    display: block;
  }
}

.footer__final {
  .row {
    border-top: none;
  }
}

.final__social-links {
  ul {
    li {
      @media (min-width: 32em) {
        float: left;
      }
    }
  }
}

/* Add more breathing room between sidebars and main ("left") columns */

@include respond-min( $main_menu-mobile_menu_cutoff ){
  #left_column,
  .authority__body__foi-results,
  #authority_selection {
    padding-right: 3em;
  }

  #left_column_flip {
    padding-left: 3em;
  }
}

/* Request page */

#right_column {
  margin-top: 0;
}

#request_show {
  margin-top: 1em;
}

#request_status {
  margin-bottom: 2em;
  border-radius: 5px;
}

div.correspondence {
  background-color: $color_sand;
  border: none;
  border-radius: 5px;
  margin-bottom: 2em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); // box-shadow to avoid weird border bevel next to 8px border-top

  .correspondence__header {
    background-color: transparent;
    border-bottom: none;
  }

  .correspondence__header__from,
  .correspondence__header__from--with-delivery-status {
    font-weight: bold;
  }

  .correspondence__footer {
    background-color: transparent;
  }
}

.js-loaded {
  .js-collapsable.outgoing.correspondence .correspondence__header.hovered {
    background-color: darken(mix($color_asktheeu_yellow, #fff, 8%), 8%);
  }
  .js-collapsable.incoming.correspondence .correspondence__header.hovered {
    background-color: darken(mix($color_asktheeu_blue, #fff, 8%), 8%);
  }
}

.outgoing.correspondence {
  border-top: 8px solid $color_asktheeu_yellow;
  background-color: mix($color_asktheeu_yellow, #fff, 8%);
}

.incoming.correspondence {
  border-top: 8px solid $color_asktheeu_blue;
  background-color: mix($color_asktheeu_blue, #fff, 8%);
}

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

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

{'fraction_non_alphanumeric': 0.14844668345927792, 'fraction_numerical': 0.029429051217464315, 'mean_word_length': 3.121280276816609, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 6, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 5, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6710528', 'n_tokens_mistral': 9625, 'n_tokens_neox': 8849, 'n_words': 1909}