// edX theme: LMS Footer
// ====================
@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/breakpoints';

$edx-footer-link-color: $primary;
$edx-footer-bg-color: rgb(252, 252, 252);

// Aggressively scoped for Drupal
// ==============================
// These styles are being loaded on Drupal, LMS and WordPress
// sites so the scope has to be aggressive to override default
// CMS styles
footer#footer-edx-v3 {
  background: $edx-footer-bg-color;
  padding: $baseline*0.75 0;
  border-top: 1px solid $courseware-button-border-color;

  // There is a generic style similar applying div and box shadow on the wiki page of course.
  // so disabling that design for footer in the lines below
  .container > div {
    border: none;
    box-shadow: none;
    background: inherit;
  }

  .column-styles {
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  a.social-links {
    font-size: 35px;
  }

  .first-div-border,
  .second-div-border,
  .third-div-border,
  .fourth-div-border {
    @include border-left(none);
  }

  .main-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
  }

  * {
    box-sizing: border-box;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }


  .list-unstyled {
    list-style: none;

    @include padding-left(0);
  }

  .flex-column {
    flex-direction: column;
  }

  a.social-links.external:hover {
    text-decoration: none;
  }

  .full-height {
    height: 100%;
  }

  .social-app-links-div {
    float: none;
    display: table-cell;
    vertical-align: top;
  }

  div.container {
    min-width: 0;
    padding: 0 $baseline*0.75;
  }

  ul.clear-margins li {
    padding-bottom: 5px;
  }

  .row.small-screen {
    display: none;
  }

  .row.all-screens {
    display: flex;
  }

  h2.heading {
    font-weight: 600;
    padding: $baseline*0.25 0;
    color: $lighter-base-font-color;

    @include margin-left(8px);
  }

  ul.clear-margins {
    list-style: outside none none;
    padding-bottom: $baseline*0.75;
    margin-top: $baseline*0.75;

    @include margin-left(8px);

    border-bottom: 1px solid $courseware-button-border-color;
    line-height: 1.5;
  }

  .footer-language-selector {
    @include float(right);
  }

  .app-links {
    margin-top: $baseline*0.75;
    height: auto;
    display: inline-flex;
  }

  .app-link img {
    height: 35px;
  }

  .social {
    margin-top: $baseline*1.5;
    height: auto;

    @include margin-left($baseline*0.25);
  }

  ul.social li {
    display: inline-flex;

    @include margin-right(10px);
  }

  .edx-footer-logo {
    display: inline-flex;

    @include margin-left(5px);

    img {
      height: $header-logo-height*1.05;
    }
  }

  // To match the Pattern Library
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  .footer-content-wrapper {
    @include outer-container;

    box-sizing: border-box;
  }

  p {
    @include font-size(14);
    @include line-height(14);

    font-family: $font-family-sans-serif;
  }

  .copyright {
    margin-top: 30px;

    a {
      text-decoration: underline !important;
    }

    @include margin-left(8px);
    @include font-size(16);
    @include line-height(24px);
  }

  .site-nav,
  .legal-notices {
    li {
      @include font-size(14);
      @include line-height(14);
      @include margin-right($baseline);

      color: $edx-footer-link-color;

      &:last-of-type {
        @include margin-right(0);
      }

      &:hover,
      &:focus {
        border: none;
      }
    }
  }

  .footer-logo,
  .site-details,
  .external-links {
    @include span-columns(12);
  }

  .site-details,
  .external-links {
    margin-top: 5px;
  }

  .footer-logo {
    margin-bottom: 30px;
  }

  .legal-notices {
    margin: 20px 0;
  }

  .openedx-link {
    @include margin(10px, 0, 30px, -8px);

    width: 141px;

    a {
      display: inline-block;
    }

    img {
      width: 100%;
    }
  }

  .about-links,
  .legal-links,
  .social-media-links,
  .mobile-app-links {
    @extend %ui-no-list;

    .list-item {
      display: inline-block;
    }
  }

  .mobile-app-links {
    @include clearfix();

    position: relative;
    width: 260px;
    height: 42px;
  }

  .social-media-links {
    @include clearfix();

    margin-bottom: 30px;
  }

  .icon {
    font-family: 'FontAwesome';
    font-style: normal;
    color: $edx-footer-link-color;
  }



  a.sm-link {
    @include float(left);
    @include margin(0, 6, 10, 0);
    @include font-size(40);
    @include line-height(28);

    width: 35px;
    height: 30px;
    line-height: 1;
    position: relative;
    display: inline;
    background: none;

    @include text-align(left);

    &:first-of-type {
      @include margin-left(0);
    }

    &:hover,
    &:focus {
      opacity: 0.7;
      border: none;
    }
  }

  a.social-links {
    @include font-size(30);
    @include line-height(1);

    position: relative;
    display: inline;
    background: none;
    text-align: left;

    &:first-of-type {
      @include margin-left(0);
    }

    &:hover,
    &:focus {
      opacity: 0.7;
      border: none;
    }
  }

  .app-link {
    &:first-of-type {
      @include left(0);
    }

    &:last-of-type {
      @include right(0);
    }

    img {
      height: 40px;
      max-width: 200px;
    }

    padding: $baseline*0.35;
  }

  .site-nav,
  .legal-notices,
  .footer-logo,
  .external-links {
    @extend %ui-print-excluded;
  }

  @media print {
    .site-details p {
      @include float(left);
    }

    .openedx-link {
      margin: 0;

      @include float(right);
    }
  }

  @include media-breakpoint-up(sm) {
    padding: $baseline $baseline*0.5;

    .column-1 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%;
    }

    .column-2,
    .column-3 {
      flex: 0 0 50%;
      max-width: 50%;
    }

    .column-2-1,
    .column-3-1,
    .column-3-2 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .column-2-2 {
      flex: 0 0 80%;
      max-width: 80%;

      @include margin-left(10%);
    }

    ul.social {
      padding: 0;
      margin: 0;
      list-style-type: none;
      margin-top: 15px;
    }

    .logo-div {
      @include margin-left(7%);

      display: inline-flex;
    }

    ul.social li {
      width: 65px;
      height: 35px;
      float: left;
      margin-left: 7px;
    }

    div.container {
      min-width: 0;
      padding: 0;
    }

    .first-div-border div div {
      border-bottom: 1px solid $courseware-button-border-color;

      @include margin-left(10%);
    }

    .second-div-border div div {
      border-bottom: 1px solid $courseware-button-border-color;

      @include margin-left(10%);
    }

    .third-div-border div div {
      border-bottom: none;

      @include margin-left(10%);
    }

    .fourth-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    .site-details {
      @include span-columns(8);
    }

    .external-links {
      @include span-columns(4);
    }

    .social-media-links,
    .mobile-app-links {
      @include float(right);
    }

    .social-media-links {
      margin-bottom: 40px;
    }

    ul.clear-margins {
      margin-top: 5px;
      border-bottom: none;
    }

    .app-link img {
      height: 35px;
      margin-top: 10px;
    }

    a.social-links {
      @include font-size(35);

      margin-top: 5px;

      @include margin-left($baseline*0.25);
    }

    .footer-language-selector {
      display: inline-block;
      float: none;
    }
  }

  @include media-breakpoint-up(md) {
    .ml-auto {
      margin-left: auto;
    }

    .footer-language-selector {
      display: inline-block;
      width: max-content;
    }

    .column-1 {
      flex: 0 0 25%;
      max-width: 25%;
    }

    .column-2 {
      flex: 0 0 75%;
      max-width: 75%;
    }

    .column-2-2 {
      flex: 0 0 80%;
      max-width: 80%;

      @include margin-left(0);
    }

    .column-2-2,
    .column-3,
    .column-3-2 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .column-2-1 {
      flex: 0 0 33.3333%;
      max-width: 33.3333%;
    }

    .column-3-1 {
      flex: 0 0 75%;
      max-width: 75%;
    }

    .edx-footer-logo {
      display: inline-flex;

      @include margin-left(0);

      margin-top: 5px;
    }

    .first-div-border {
      @include border-left(none);

      border-bottom: none;
    }

    .first-div-border div div {
      border-bottom: none;

      @include margin-left(0);
    }

    .second-div-border div div {
      border-bottom: none;

      @include margin-left(0);
    }

    .second-div-border {
      @include border-left(1px solid $courseware-button-border-color);

      border-bottom: none;
    }

    .third-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    padding: $baseline $baseline*0.5;

    .site-details {
      @include span-columns(8);
    }

    .external-links {
      @include span-columns(4);
    }

    .social-media-links,
    .mobile-app-links {
      @include float(right);
    }

    .social-media-links {
      margin-bottom: 40px;
    }

    ul.clear-margins {
      margin-top: 15px;
      border-bottom: none;
    }

    .social {
      display: inline-flex;
      vertical-align: middle;
    }

    ul.social {
      margin-top: 29px;
    }

    .app-links {
      display: inline-flex;

      @include margin-left($baseline*0.25);

      vertical-align: middle;
    }

    ul.clear-margins li {
      @include font-size(16);
    }

    h2.heading {
      font-weight: 700;
    }

    .col-md-3 .footer-language-selector {
      float: none;
      display: block;

      @include margin-left(0);
    }

    ul.social li {
      display: inline-flex;
      width: auto;
    }
  }

  @include media-breakpoint-up(lg) {
    padding: $baseline $baseline*0.5;

    .column-1,
    .column-2-2,
    .column-3-1,
    .column-3-2 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .column-2 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%;
    }

    .column-2-1,
    .column-3 {
      flex: 0 0 33.3333%;
      max-width: 33.3333%;
    }

    .column-2-2 {
      @include margin-left(0);
    }

    .edx-footer-logo {
      @include margin-left($baseline);
    }

    .first-div-border {
      @include border-left(none);
    }

    .second-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    .third-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    .fourth-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }


    .col-xl-2 .edx-footer-logo {
      @include margin-left(0);
      @include padding(0, 0, $baseline, $baseline);
    }

    div.col-xl-6 div.col-xl-4 div div {
      border-bottom: none;
    }

    .col-xl-10 div.row div:nth-child(1) div.row:nth-child(1) {
      @include padding-left($baseline*1.75);
    }

    .col-xl-2.col-md-12.col-sm-3.col-xs-10 {
      text-align: left;
    }

    .site-details {
      @include span-columns(8);
    }

    .external-links {
      @include span-columns(4);
    }

    .app-links {
      @include margin-left(0);
    }

    .social-media-links,
    .mobile-app-links {
      @include float(right);
    }

    .social-media-links {
      margin-bottom: 40px;
    }

    ul.clear-margins {
      margin-top: $baseline*0.75;
      border-bottom: none;
    }

    .social {
      display: inline-flex;
      vertical-align: middle;
      margin-top: $baseline;
    }

    .app-links {
      display: inline-flex;
      vertical-align: middle;
    }

    ul.clear-margins li {
      @include font-size(16);

      padding-bottom: $baseline*0.25;
    }

    h2.heading {
      font-weight: 700;
      padding-bottom: $baseline*0.5;
    }

    .col-xl-2 .footer-language-selector {
      display: inline-block;
      width: max-content;
      margin-left: 0;
    }

    ul.social li {
      display: inline;
    }
  }

  @include media-breakpoint-up(xl) {
    .margin {
      @include margin-left(0);
    }

    .first-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    .column-1 {
      flex: 0 0 16.6667%;
      max-width: 16.6667%;
    }

    .column-2 {
      flex: 0 0 50%;
      max-width: 50%;
    }

    .column-2-1,
    .column-3 {
      flex: 0 0 33.3333%;
      max-width: 33.3333%;
    }

    .column-2-2 {
      @include margin-left(0%);
    }

    .column-2-2,
    .column-3-1,
    .column-3-2 {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .second-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    .third-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    .fourth-div-border {
      @include border-left(1px solid $courseware-button-border-color);
    }

    .footer-logo {
      @include span-columns(2);
    }

    .app-links {
      @include margin-left(0);
    }

    .site-details {
      @include span-columns(7);
    }

    .external-links {
      @include span-columns(3);
    }

    ul.clear-margins li {
      @include font-size(16);
    }

    .col-xl-2 .edx-footer-logo {
      @include padding_left(0);
    }

    .social-media-links {
      margin-bottom: $baseline*2.5;
    }

    ul.social li {
      display: inline;
    }


    .col-xl-10 div.row div div.row {
      height: 100%;
    }

    .clear-margins {
      border-bottom: none;
    }

    .col-xl-10 div.row div:nth-child(1) div.row:nth-child(1) {
      padding: 0;
    }

    .footer-language-selector {
      margin: 20px 0;
      padding: 0;
      float: none;
    }
  }

  .footer-language-selector {
    margin: 10px 0;

    label[for=footer-language-select] {
      display: inline-block;
      cursor: initial;
    }
  }

  .select-lang-button {
    padding: 3px;
    color: $m-blue-d3 !important;
    height: 30px;
    margin-left: 0;

    &:hover,
    &:active,
    &:focus {
      background: $m-blue-d3 !important;
      color: white !important;
    }
  }


  @extend %ui-print-excluded;
}