/* ---------------------------------------------------------------------------*/
/* MOBILE FIRST -  layout/header/_header-menu--main-additional.scss           */
/* ---------------------------------------------------------------------------*/
@charset "UTF-8";
////////////////////////////////////////////////////// BREAKPOINT EXTRA SMALL UP
@include media-breakpoint-up(xs) {
  //////////////////////////////////////////////////////////////////////////////
  // [ COMMON ]
  #menu-add {
    height     : 3.25rem;
    padding-top: 14px;
    text-align : center;
    // target all direct child
    > .region div[id^="block"],
     > .region nav[id^="block"] {
      position      : relative;
      display       : inline-block;
      margin        : 0 2px;
      vertical-align: top;
    }
    button a,
    ul:not(.contextual-links) a {
      // hide text
      font-size: 0;
      // add icon container
      &:before {
        content         : '';
        margin-left     : .25rem;
        display         : inline-block;
        background-color: $white;
        width           : 30px;
        height          : 30px;
        transition      : $transition-base;
      }
      // hoover effect
      &:hover:before {
        background-color: $primary;
      }

      // icons
      &[href*='user'] {
        &:before {
          mask     : url('../icon/user.svg');
          mask-size: cover;
        }
      }
      &[href*='user/login'] {
        &:before {
          mask     : url('../icon/login.svg');
          mask-size: cover;
        }
      }
      &[href*='user/logout'] {
        &:before {
          mask     : url('../icon/logout.svg');
          mask-size: cover;
        }
      }
      &[href*='rss'] {
        &:before {
          mask     : url('../icon/rss.svg');
          mask-size: cover;
        }
      }
      &[href*='contact'] {
        &:before {
          mask     : url('../icon/send.svg');
          mask-size: cover;
        }
      }

      &[href*='language'] {
        &:before {
          mask     : url('../icon/language.svg');
          mask-size: cover;
        }
      }
    }
    //////////////////////////////////////////////////////////////////////////////
    // [ SYNDICATE ]

    #block-bootstrap-for-drupal-syndicate {
      .feed-icon {
        display   : inline;
        background: none;
        margin-top: 0;
      }
    }
    //////////////////////////////////////////////////////////////////////////////
    // [ MENU LANGUAGE ]
    #block-bootstrap-for-drupal-language-interface {
      width: 30px;
      // dropdown toggle
      .dropdown-toggle:after {
        border: 0;
      }
      // dropdown
      .dropdown {
        height: 35px;
        button {
          padding: 0;
          &:focus {
            box-shadow: none;
          }
        }
        .btn {
          vertical-align: unset;
          padding-left  : 0;
        }
        .dropdown-menu {
          border-radius: $border-radius;
          padding      : 4px;
          min-width    : inherit;
          background   : $gray-200;
          ul {
            margin-bottom: 0;
            &.show {
              display: block;
            }
          }
          ul li:not(:first-of-type) {
            margin-top: 5px;
          }
          //Flags
          #language-selector a,
          ul:not(.contextual-links) a {
            font-size        : 0;
            height           : 21px;
            width            : 30px;
            display          : block;
            background-size  : contain;
            background-repeat: no-repeat;
            &:hover {
              background-color: transparent;
            }
            &:before {
              background-color: transparent;
            }
            &[hreflang="fr"] {
              background-image: url('../image/flags/France.png');
            }
            &[hreflang="en"] {
              background-image: url('../image/flags/United-Kingdom.png');
            }
            &[hreflang="es"] {
              background-image: url('../image/flags/Spain.png');
            }
            &[hreflang="de"] {
              background-image: url('../image/flags/Germany.png');
            }
            &[hreflang="nl"] {
              background-image: url('../image/flags/Netherlands.png');
            }
            &[hreflang="it"] {
              background-image: url('../image/flags/Italy.png');
            }
            &[hreflang="pt-pt"] {
              background-image: url('../image/flags/Portugal.png');
            }
            &[hreflang="pt-br"] {
              background-image: url('../image/flags/Brazil.png');
            }
            &[hreflang="ru"] {
              background-image: url('../image/flags/Russia.png');
            }
          }
        }
      }
    }
  }
}

/////////////////////////////////////////////////////////// BREAKPOINT MEDIUM UP
@include media-breakpoint-up(md) {
  //////////////////////////////////////////////////////////////////////////////
  // [ COMMON ]
  #menu-add {
    height     : 40px;
    padding-top: 7px;
    button a,
    ul:not(.contextual-links) a {
      &:before {
        width : 25px;
        height: 25px;
      }
    }
  }
}
