/**
 * @file
 * Styles for administration pages.
 */

/**
 * Node add/edit form layout
 */

/* Narrow screens */
.layout-region {
    box-sizing: border-box;
}

div.contextual {
    position: sticky;
    top: 5px;
}

div.contextual button.trigger,
div.contextual.open button.trigger {
    position: absolute !important;
    top: 2px;
    right: 2px;
    width: 22px !important;
    height: 22px !important;
    background-size: 12px 12px;
}

div.contextual ul.contextual-links {
  position: absolute !important;
  top: 12px !important;
  right: 20px !important;
}

/*
#block-wolf-breadcrumbs div.contextual {
  transform: skewX(30deg);
}
*/

.contextual-region div.contextual .contextual-links,
.contextual-region div.contextual .contextual-links li {
    background-color: rgb(63,63,63);
}

.contextual-region div.contextual .contextual-links li a {
    color: bisque;
    background-color: rgb(63,63,63);
    text-shadow: none;
}

.contextual-region div.contextual .contextual-links li a:hover {
    color: black;
    background-color: rgb(200,200,200);
}




/* Wide screens */
@media
    screen and (min-width: 780px),
    (orientation: landscape) and (min-device-height: 780px) {

    #block-adminimal-theme-content form .layout-node-form .layout-region-node-main,
    #block-adminimal-theme-content form .layout-node-form .layout-region-node-footer {
        float: left; /* LTR */
        box-sizing: border-box;
        width: 75%;
        padding-right: 2em; /* LTR */
    }

    [dir="rtl"] div.layout-region-node-main,
    [dir="rtl"] div.layout-region-node-footer {
        float: right;
        padding-right: 0;
        padding-left: 2em;
    }

    #block-adminimal-theme-content form .layout-node-form .layout-region-node-secondary {
        float: right; /* LTR */
        width: 25%;
    }

    [dir="rtl"] div.layout-region-node-secondary {
        float: left;
    }

    /* @todo File an issue to add a standard class to all text-like inputs */
    div.layout-region-node-secondary .form-autocomplete,
    div.layout-region-node-secondary .form-text,
    div.layout-region-node-secondary .form-tel,
    div.layout-region-node-secondary .form-email,
    div.layout-region-node-secondary .form-url,
    div.layout-region-node-secondary .form-search,
    div.layout-region-node-secondary .form-number,
    div.layout-region-node-secondary .form-color,
    div.layout-region-node-secondary textarea {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
  }

  /**
   * The vertical toolbar mode gets triggered for narrow screens, which throws off
   * the intent of media queries written for the viewport width. When the vertical
   * toolbar is on, we need to suppress layout for the original media width + the
   * toolbar width (240px). In this case, 240px + 780px.
   */
  @media
    screen and (max-width: 1020px) {

    div.toolbar-vertical.toolbar-tray-open .layout-region-node-main,
    div.toolbar-vertical.toolbar-tray-open .layout-region-node-footer,
    div.toolbar-vertical.toolbar-tray-open .layout-region-node-secondary {
        float: none;
        width: auto;
        padding-right: 0;
    }
}