// Place any Drupal-related quirks here.
/*
 * zurb_foundation.scss - Contains all Drupal-specific SASS for this theme.
 *
 * @todo Split this into multiple folders/files.
*/

// A fix for https://www.drupal.org/node/953034 - Themes currently cannot
// determine if a region is empty

.region-highlighted:empty {
    display: none;
}

// This has been an issue since 7.x, Foundation rules about list elements
// affect Navbar sizing.

.toolbar-tray a {
    font-size: 13px;
}

// Remove Foundation's top margin from the toggle orientation button.

.toolbar .toolbar-toggle-orientation .toolbar-icon {
    margin: 0;
    // Fix offset problem where half of orientation button is not visible.
    &:before {
        min-height: 0;
    }
}

// Override styles from /core/modules/system/css/components/menu.theme.css

.top-bar-section ul li {
    padding-top: 0;
    a.is-active {
        color: #FFFFFF;
    }
}

// Preventing Top Bar FOUC
// http://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc
// More info: https://www.drupal.org/node/2783573
.no-js .top-bar {
  display: none;
}

@media screen and (min-width: 40em) {
  .no-js .top-bar {
    display: block;
  }
  .no-js .title-bar {
    display: none;
  }
}

// Offset the top bar if the Navbar (toolbar) is present.

body.toolbar-fixed .sticky.is-stuck .top-bar {
    margin-top: 39px;
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .sticky.is-stuck .top-bar {
    margin-top: 78px;
}

body.toolbar-fixed .sticky.is-stuck.is-at-top {
    margin-top: 0 !important;
}

// Removes core arrow image from menu items.

.top-bar {
    .menu-item--collapsed,.menu-item--expanded {
        list-style: none;
    }
}


// Style the search form, if embedded in the Top Bar.

.top-bar .search-block-form {
    .form-item-keys, .form-actions {
        display: inline-block;
    }
}

// Dropdown button styling.

.dropbutton-wrapper {
    // Sub-themes will have to override this color, unfortunately.
    background-color: #008CBA;
    margin: 0 0 1.25rem;
    .button {
        margin-bottom: 0;
        width: 100%;
        text-align: left;
    }
}

// Add A11y-related Classy styling for required form fields.
.form-required:after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  // Use a background image to prevent screen readers from announcing the text.
  background-image: url(../images/foundation/misc/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}

// Fix overlapping dropdown on node preview page.
.node-preview-container {
  position: relative;

  .node-preview-backlink {
    margin-right: 1rem;
  }

  select {
    width: auto;
  }
}
//Spacing between comment box and action buttons
#edit-comment-body-wrapper {
  margin: 0 0 0.625rem;
}