@charset "UTF-8";
@import "../../../../../../lib/craftcms-sass/mixins";

$sidebarWidth: 225px;
$detailsWidth: 350px;
$minFullUiWidth: 1200px;
$minHorizontalUiWidth: $minFullUiWidth - $sidebarWidth;

$sidebarBgColor: hsl($hue, 20%, 25%);
$sidebarLinkHoverBgColor: hsla($hue, 20%, 20%, 0.05);

$editionStaticColor: hsl($hue, 20%, 8%);
$editionHoverColor: hsl($hue, 20%, 70%);

html,
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

#global-container {
  display: flex;
  min-height: 0;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  width: 100vw;
}

/* global sidebar */

$sidebarLinkStaticColor: hsl($hue, 5%, 85%);
$sidebarLinkSecondaryColor: hsl($hue, 5%, 75%);

#global-sidebar {
  flex: 0 0 $sidebarWidth;
  display: flex;
  flex-direction: column;
  z-index: 100;
  position: relative;
  width: $sidebarWidth;
  height: 100vh;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  @include light-on-dark-text;
  background: $sidebarBgColor;
  box-shadow: inset -1px 0 0 darken($sidebarBgColor, 10%);

  #devmode {
    flex: 0 0 4px;
    width: 100%;
    min-height: 4px; // fixes Windows scaling bug (https://github.com/craftcms/cms/issues/3259)
    background: url(../images/dev-mode.svg) repeat-x 21px 0;
    cursor: help;
  }

  a {
    color: $sidebarLinkStaticColor;
    transition: color linear 100ms;
    text-decoration: none;
  }

  & > a,
  *:not(.has-subnav) > a {
    outline: none;
    transition: background-color linear 100ms;

    &:hover,
    &.active,
    &:active {
      color: #fff;
    }

    &:hover {
      background-color: darken($sidebarBgColor, 3%);
      transition: none;

      .icon {
        opacity: 1;
      }
    }

    &.active,
    &:active {
      background: darken($sidebarBgColor, 6%);
    }

    .icon {
      transition: opacity linear 100ms;
    }
  }

  #user-photo img {
    width: auto;
    max-width: 32px;
    margin: 0 auto;
    overflow: hidden
  }

  .light {
    color: #717983;
  }

  #system-info {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: top;
    @include padding(28px, 14px, 28px, 10px);
    min-height: -webkit-min-content;
    min-height: -moz-min-content;

    &:after {
      display: none;
    }

    #site-icon {
      width: 32px;
      height: 32px;
      @include margin(6px, 14px, 0, 0);

      img,
      svg {
        display: block;
        width: 32px;
        height: 32px;
        border-radius: 4px;
      }

      svg {
        @include svg-mask($mediumTextColor);
      }
    }

    #system-name {
      flex: 1;

      h2 {
        margin: 0;

        span {
          white-space: nowrap;
        }
      }

      #user-info {
        margin-top: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;

        #user-photo {
          width: 14px;
          height: 14px;
          @include margin-right(5px);

          img {
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
          }
        }
      }
    }
  }

  #devmode + #system-info {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  nav {
    flex: 1;
    margin: 12px 0 0;
  }

  #job-icon {
    & > span.icon {
      display: block;
      position: relative;
      width: 16px;
      height: 16px;

      & > canvas {
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;

        &#job-icon-hover {
          opacity: 0;
          transition: opacity linear 100ms;
        }
      }
    }

    .progressbar {
      position: static;
      margin: 8px 2px;
      width: auto;
      border-color: hsl($hue, 5%, 85%);
      transition: color linear 100ms;
    }

    .progressbar-inner {
      background: hsl($hue, 5%, 85%);
      transition: color linear 100ms;
    }

    &:hover {
      .progressbar {
        border-color: #fff;
      }

      .progressbar-inner {
        background: #fff;
      }

      .icon > span.icon > canvas#job-icon-hover {
        opacity: 1;
      }
    }
  }

  #nav {
    overflow: visible;

    li {
      &:not(.has-subnav) > a.sel {
        color: #fff;
        background: darken($sidebarBgColor, 6%);
        box-shadow: inset 0 0 0 1px darken($sidebarBgColor, 10%);
        border-color: $submitColor;
        opacity: 1;

        .icon {
          opacity: 1;
        }
      }

      a {
        @include padding-left(18px);
        border-left: 0 solid transparent;

        &.active {
          color: #fff;
        }

        &.menubtn {
          line-height: 26px;
        }

        &:active .icon {
          opacity: 1;
        }

        .icon {
          @include margin(0, 22px, 0, 0);
          opacity: 0.5;

          &.icon-mask {
            svg {
              @include svg-mask(#fff);
            }

            span[data-icon] {
              color: #fff;
            }
          }
        }

        .label {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .badge {
          @include margin-right(0);
          background: rgba(255, 255, 255, 0.5);
          color: $sidebarBgColor;
        }
      }

      ul {
        display: block;
        margin-bottom: 10px;

        li a {
          @include padding(3px, 14px, 3px, 56px);
          font-size: 12px;

          &:not(.active) {
            color: $sidebarLinkSecondaryColor;
          }
        }
      }
    }
  }
}

#app-info {
  padding: 14px 14px 24px;
  color: $editionStaticColor;
  text-align: center;

  #edition {
    font-size: 14px;

    &.hot:hover {
      cursor: pointer;

      #edition-logo {
        border-color: $editionHoverColor;

        & > .edition-name {
          color: $editionHoverColor;
        }

        & > .edition-trial {
          background: $editionHoverColor;

          &:before {
            body.ltr & {
              border-color: transparent $editionHoverColor transparent transparent;
            }

            body.rtl & {
              border-color: transparent transparent transparent $editionHoverColor;
            }
          }
        }
      }
    }

    #edition-logo {
      user-select: none;
      border: 1px solid $editionStaticColor;
      border-radius: 3px;
      display: inline-flex;
      height: 24px;
      transition: border-color linear 100ms;

      & > .edition-name,
      & > .edition-trial {
        padding: 8px 8px 7px;
        line-height: 8px;
        font-weight: 500;
      }

      & > .edition-name {
        letter-spacing: 2.2px;
        padding-right: 5.8px;
        text-transform: uppercase;
        transition: color linear 100ms;
      }

      & > .edition-trial {
        display: inline-block;
        position: relative;
        @include margin-left(5px);
        @include padding-left(5px);
        background: $editionStaticColor;
        color: $sidebarBgColor;
        border-radius: 0 1px 1px 0;
        letter-spacing: 1px;
        @include padding-right(7px);
        text-transform: lowercase;
        transition: background linear 100ms;

        &:before {
          display: block;
          position: absolute;
          top: 0;
          content: '.';
          font-size: 0;
          width: 0;
          height: 0;
          border-style: solid;
          transition: border-color linear 100ms;

          body.ltr & {
            left: -10px;
            border-width: 0 10px 23px 0;
            border-color: transparent $editionStaticColor transparent transparent;
          }

          body.rtl & {
            right: -10px;
            border-width: 0 0 23px 10px;
            border-color: transparent transparent transparent $editionStaticColor;
          }
        }
      }
    }
  }

  #version {
    margin-top: 4px;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* main-container */

#main-container {
  flex: 1 0 0;
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;

  #alerts {
    background: $errorColor;
    padding: 9px 0;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #fff;

    li {
      padding: 4px 24px;

      &:before {
        @include icon;
        @include margin(-1px, 3px, 0, 0);
        content: 'alert';
        font-size: 16px;
      }

      a {
        color: #fff;
        text-decoration: underline;

        &.go {
          text-decoration: none;
          white-space: nowrap;
          border: 1px solid rgba(255, 255, 255, 0.5);
          border-radius: $btnBorderRadius;
          padding: 3px 5px;
          margin: 0 2px;

          &:after {
            color: #fff;
          }

          &:hover {
            border-color: #fff;
            transition: border-color linear 100ms;
          }
        }
      }
    }
  }

  #crumbs {
    flex-direction: row;
    align-items: stretch;
    padding: 16px 24px 0;
    font-size: 13px;
    background: darken($bgColor, 3%);

    &.empty {
      display: none;

      & + #main #header {
        padding-top: 33px;
        padding-bottom: 33px;
      }
    }

    &:not(.empty) {
      display: flex;

      & + #main #header {
        padding-top: 3px;
        padding-bottom: 21px;
      }
    }

    nav {
      margin: 0;

      ul {
        display: flex;
        flex-direction: row;
        align-items: stretch;

        li {
          &:after {
            @include icon;
            margin: -1px 5px 0;
            font-size: 11px;
            color: $mediumTextColor;
            body.ltr & {
              content: 'rightangle';
            }
            body.rtl & {
              content: 'leftangle';
            }
          }

          a {
            display: inline-block;
            padding: 5px 0 1px;
            color: $mediumTextColor;

            &:hover {
              color: $linkColor;
              text-decoration: none;
            }
          }
        }
      }
    }
  }

  #main,
  #main-form {
    flex: 1;
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
  }

  #main {
    #header {
      display: flex;
      align-items: center;
      align-content: stretch;
      flex-wrap: nowrap;
      justify-content: space-between;
      position: relative;
      z-index: 2;
      padding-left: 24px;
      padding-right: 24px;
      box-sizing: border-box;
      width: calc(100vw - #{$sidebarWidth});
      background: darken($bgColor, 3%);
      box-shadow: 0 1px 0 $hairlineColorAlpha;

      body.fixed-header & {
        position: fixed;
        z-index: 12;
        top: 0;
      }

      body.fixed-header.ltr & {
        left: $sidebarWidth;
      }

      body.fixed-header.rtl & {
        right: $sidebarWidth;
      }

      body.fixed-header.focused & {
        position: absolute;
      }

      .flex {
        flex-wrap: nowrap;
        max-width: 100%;

        &.flex-nowrap {
          min-width: 0;
        }

        & > * {
          margin-bottom: 0;
        }
      }

      h1 {
        line-height: 32px;
        margin-top: 0;
        margin-bottom: 0;
        min-width: 0;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:not(:last-child) {
          @include margin-right(14px !important);
        }
      }

      .buttons,
      .btngroup {
        margin-top: 0;
      }
    }

    #main-content {
      flex: 1;
      display: flex;
      min-height: 0;
      flex-direction: row;
      align-items: stretch;
      width: calc(100vw - #{$sidebarWidth});

      &:not(.has-sidebar):not(.has-details) {
        #content-container {
          width: 100%;
        }
      }
      &.has-sidebar:not(.has-details) {
        #content-container {
          width: calc(100% - #{$sidebarWidth});
        }
      }
      &.has-details:not(.has-sidebar) {
        #content-container {
          width: calc(100% - #{$detailsWidth});
        }
      }
      &.has-sidebar.has-details {
        #content-container {
          width: calc(100% - #{$sidebarWidth + $detailsWidth});
        }
      }

      #sidebar-toggle {
        display: none;
      }

      #sidebar,
      #content,
      #details {
        overflow-y: auto;
      }

      #sidebar {
        flex: 0 0 $sidebarWidth;
        width: $sidebarWidth;
        box-sizing: border-box;
        padding-bottom: 48px;
      }

      #content-container {
        display: flex;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;

        #tabs {
          position: relative;
          z-index: 2;
          min-height: 40px;
          overflow: hidden;
          margin: -4px 0 -10px;
          padding: 5px 0 10px;
          box-sizing: border-box;

          &:after {
            content: '.';
            font-size: 0;
            display: block;
            position: absolute;
            pointer-events: none;
            bottom: 0;
            left: 0;
            width: calc(100% - 1px);
            height: 10px;
            background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
            box-shadow: 0 -1px 0 $hairlineColor;
          }

          ul {
            display: flex;
            flex-direction: row;
            width: calc(100% - 1px);

            li {
              a {
                position: relative;
                display: block;
                padding: 8px 24px;
                white-space: nowrap;
                overflow: hidden;
                box-sizing: border-box;

                &:after {
                  content: '.';
                  font-size: 0;
                  display: block;
                  position: absolute;
                  top: 0;
                  @include right(0);
                  width: 24px;
                  height: calc(100% - 1px);

                  body.ltr & {
                    background: linear-gradient(to right, hsla($hue, 10%, 93%, 0), $bgColor 17px);
                  }

                  body.rtl & {
                    background: linear-gradient(to left, hsla($hue, 10%, 93%, 0), $bgColor 17px);
                  }
                }

                &:hover {
                  text-decoration: none;
                }

                &:not(.sel) {
                  color: $mediumDarkTextColor;

                  &:hover {
                    color: $linkColor;
                  }
                }

                &.sel {
                  color: $textColor;
                  background: #fff;
                  padding-top: 10px;
                  padding-bottom: 10px;
                  margin: -4px -1px 0;
                  cursor: default;
                  background-clip: padding-box;
                  border-radius: $menuBorderRadius $menuBorderRadius 0 0;
                  border: solid $hairlineColorAlpha;
                  border-width: 1px 1px 0;
                  z-index: 1;

                  &:after {
                    body.ltr & {
                      background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 17px);
                    }

                    body.rtl & {
                      background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 17px);
                    }
                  }
                }
              }
            }
          }
        }

        #content {
          flex: 1;
          background: #fff;
          background-clip: padding-box;
          padding: 24px 24px 48px;
          word-wrap: break-word;
          @include border-right(1px solid $hairlineColorAlpha);
        }

        #footer {
          z-index: 1;
          box-shadow: 0 -1px 0 $hairlineColorAlpha;
          padding: 10px 24px;
          background: #fff;

          & > *,
          .flex > * {
            margin-bottom: 0;
          }
        }
      }

      #details {
        flex: 0 0 $detailsWidth;
        width: $detailsWidth;
        padding: 24px 0 32px;

        .meta {
          padding: 16px 24px;

          &.read-only {
            background: darken($bgColor, 3%);

            &:first-child {
              margin-top: 30px;
            }
          }

          & > .field,
          & > .data {
            padding-left: 0;
            padding-right: 0;

            & > .heading > label,
            & > .heading {
              color: hsl($hue, 15%, 38%);
            }
          }
          & > .field.has-errors {
            margin: 0 -24px !important;
            padding: 0 24px;
          }

          & > .field + .field {
            border-top-color: $hairlineColorAlpha;
          }

          .text::placeholder,
          .datewrapper .text:placeholder-shown + div[data-icon],
          .timewrapper .text:placeholder-shown + div[data-icon] {
            color: hsl($hue, 5%, 60%);
          }

          .ui-datepicker {
            @include margin(0, 0, 0, -8px);
          }
        }

        hr {
          margin: 0;
          border-top-color: $hairlineColorAlpha;
        }

        .spinner {
          background-image: url(../images/spinner_details.gif);
        }

        .text {
          background: transparent;
        }
      }

      // for the Dashboard and any other full-page grids:
      & > .grid:only-child {
        flex: 1;
      }
    }
  }
}

// Hide the sidebar at < 1200
@media only screen and (max-width: $minFullUiWidth - 1px) {
  #global-container {
    position: relative;
    @include left(-$sidebarWidth);
    width: calc(100vw + #{$sidebarWidth});

    body.ltr & {
      transition: left 250ms ease-in-out;
    }

    body.rtl & {
      transition: right 250ms ease-in-out;
    }

    body.ltr.showing-nav & {
      left: 0;
    }

    body.rtl.showing-nav & {
      right: 0;
    }
  }

  #main-container {
    max-width: none;

    #crumbs {
      display: flex !important;

      body.no-header & {
        padding-bottom: 16px;
      }

      #nav-toggle {
        display: block;
      }
    }

    #main {
      #header {
        width: 100vw;
        padding-top: 3px !important;
        padding-bottom: 21px !important;

        body.ltr.fixed-header & {
          left: 0;
          transition: left 250ms ease-in-out;
        }

        body.rtl.fixed-header & {
          right: 0;
          transition: right 250ms ease-in-out;
        }

        body.ltr.showing-nav.fixed-header & {
          left: $sidebarWidth;
        }

        body.rtl.showing-nav.fixed-header & {
          right: $sidebarWidth;
        }
      }

      #main-content {
        width: 100vw;
      }
    }
  }
}

// Rearrange #main-content to flow vertically at < 999
@media only screen and (max-width: $minHorizontalUiWidth - 1px) {
  #global-container {
    height: auto;
    min-height: 100vh;
  }

  #main-container {
    #main {
      #header {
        flex-wrap: wrap;

        .flex {
          margin-top: 10px;
        }
      }

      #main-content {
        flex-direction: column;
        max-height: none !important;

        #sidebar-toggle {
          display: block;
          position: relative;
          box-shadow: inset 0 -1px 0 $hairlineColor;
          color: $textColor;
          text-align: center;
          line-height: 21px;
          @include padding(14px, 50px, 14px, 24px);
          padding: 14px 24px;

          body:not(.showing-sidebar) & {
            background: $lightBgColor;
          }

          body.showing-sidebar & {
            background: linear-gradient(hsl($hue, 5%, 90%), hsl($hue, 5%, 92%));
          }

          &:hover {
            text-decoration: none;
          }
        }

        #sidebar,
        #content-container,
        #details {
          overflow-y: visible;
        }

        #sidebar {
          flex-basis: auto;
          width: auto;
          box-shadow: inset 0 -1px 0 $hairlineColor;

          body:not(.showing-sidebar) & {
            display: none;
          }
        }

        #content-container {
          width: 100% !important;
        }

        #details {
          flex-basis: auto;
          width: auto;
          box-shadow: inset 0 1px 0 $hairlineColorAlpha !important;
          padding-top: 0;
        }
      }
    }
  }
}

// Tighten up the padding at < 768
@media only screen and (max-width: 767px) {
  #main-container {
    #crumbs,
    #main #header,
    #main #main-content #content-container #tabs ul li a,
    #main #main-content #content-container #content,
    #main #main-content #details .meta {
      padding-left: 12px;
      padding-right: 12px;
    }

    #main #main-content #content-container #tabs ul li a:after {
      width: 12px;
    }
  }
}

@media print {
}

#queue-hud {
  padding: 0;
  overflow: auto;

  .job {
    padding: 14px 24px;

    & + .job {
      border-top: 1px solid $hairlineColor;
    }

    .flex {
      align-items: center;

      & > * {
        margin-bottom: 0;
      }
    }

    .job-status {
      @include margin-left(7px);
      width: 100px;
      color: $lightTextColor;
      text-align: center;

      .progressbar {
        position: static;
        width: auto;
      }

      .menubtn {
        @include margin-right(-22px);
      }
    }
  }
}

#settingsmenu ul li a {
  @include padding-left(46px);

  &:before {
    @include margin(1px, 0, 0, -22px);
    font-size: 15px;
  }

  img {
    width: 16px;
    height: 16px;
    position: absolute;
    margin-left: -23px;
    margin-top: 1px;
  }
}

/* notifications */
#notifications-wrapper {
  position: relative;
  z-index: 101;
  pointer-events: none;

  body.fixed-header & {
    position: fixed;
    width: 100%;
  }
}

#notifications {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;

  .notification {
    padding: 5px 10px;
    border-radius: 0 0 3px 3px;
    border-width: 0 1px 1px;
    color: #fff !important;
    pointer-events: auto;
    @include light-on-dark-text;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);

    &.notice {
      background: $noticeColor;
    }

    &.error {
      background: $submitColor;
    }
  }
}

#nav-toggle {
  display: none;
  width: 36px;
  height: 26px;
  line-height: 26px;
  color: $secondarySubmitColor;
  text-align: center;
  @include margin-left(-10px);

  &:before {
    @include icon;
    content: 'menu';
    font-size: 16px;
    line-height: 0;
  }
}

/* grids */
.grid {
  position: relative;

  &:after {
    @include clearafter;
  }

  & > .item {
    display: none;
    box-sizing: border-box;
  }
}

.lp-editor-container,
.lp-preview-container {
  position: fixed;
  top: 0;
  height: 100%;
  background: #fff;
  z-index: 100;
}

.lp-editor-container {
  display: flex;
  flex-direction: column;

  header {
    padding: 10px 24px;
    background: darken($bgColor, 3%);

    .btn, .spinner, .checkmark-icon {
      margin-bottom: 0;
    }
  }

  .lp-editor {
    flex: 1;
    padding: 24px;
    overflow: auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;

    & > .field:last-child {
      margin-bottom: 24px !important;
    }
  }

  .lp-draghandle {
    position: absolute;
    top: 0;
    @include right(-4px);
    width: 4px;
    height: 100%;
    cursor: col-resize;
  }
}

.lp-preview-container {
  display: flex;
  flex-direction: column;

  &.dragging:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    font-size: 0;
  }

  header {
    padding: 10px 24px;
    background: #222;
    border-bottom: 1px solid #444;
    justify-content: center;

    .btn {
      background: #444;
      margin-bottom: 0;
      color: #fff;
      box-shadow: none;

      &:active, &.active {
        background: #333;
      }
    }
  }

  .lp-preview {
    flex: 1;
  }
}

.lp-target-menu {
  background: #444;

  ul {
    li {
      a {
        color: #fff !important;

        &:not(.sel):not(.disabled):hover {
          background: #555;
        }
      }
    }
  }
}

/* Sidebar */
.sidebar {
  width: $sidebarWidth;
  padding: 14px 24px;
  overflow: auto;
  background: $lightBgColor;
  box-sizing: border-box;
  font-size: 13px;

  body.ltr & {
    box-shadow: inset -1px 0 0 $hairlineColor;
  }

  body.rtl & {
    box-shadow: inset 1px 0 0 $hairlineColor;
  }

  .heading {
    position: relative;
    @include margin(14px, 0, 2px, -24px);
    padding: 0 24px;

    span {
      display: inline-block;
      position: relative;
      z-index: 1;
      padding: 0 5px;
      margin: 0 -5px;
      text-transform: uppercase;
      color: $lightTextColor;
      font-size: 11px;
      font-weight: bold;
    }
  }

  nav {
    margin: 0 -24px;
    padding: 0 24px;
    overflow: auto;

    & > ul > li > ul > li {
      & > a {
        @include padding-left(44px);
      }

      & > ul > li {
        & > a {
          @include padding-left(64px);
        }

        & > ul > li {
          & > a {
            @include padding-left(84px);
          }

          & > ul > li a {
            @include padding-left(104px);
          }
        }
      }
    }

    li {
      position: relative;

      &:not(.has-subnav) > a {
        transition: background-color linear 100ms;

        &:hover {
          text-decoration: none;
          color: $textColor;
          background: $sidebarLinkHoverBgColor;
          transition: none;
        }

        &.sel {
          background: $darkSelColor;
          @include light-on-dark-text;
          cursor: default;

          &,
          & + .toggle {
            color: #fff;
          }

          .icon.icon-mask {
            svg {
              @include svg-mask(#fff);
            }

            span[data-icon] {
              color: #fff;
            }
          }

          .badge {
            background: #fff;
            color: $darkSelColor;
          }
        }
      }

      a {
        margin: 0 -24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        @include padding(7px, 14px, 7px, 24px);
        min-height: 24px;
        box-sizing: border-box;
        color: $textColor;
        user-select: none;
        outline: none;

        .status {
          flex-shrink: 1;
        }

        .icon {
          @include margin(0, 10px, 0, -10px);
          flex-shrink: 1;
          width: 16px;
          height: 16px;

          &.icon-mask {
            svg {
              @include svg-mask($mediumTextColor);
            }

            span[data-icon] {
              color: $mediumTextColor;
            }
          }

          svg {
            width: 16px;
            height: 16px;
          }

          span[data-icon] {
            font-size: 16px;

            &::before {
              display: block;
            }
          }
        }

        .label {
          flex: 1;
        }

        .badge {
          @include margin(0, -4px, 0, 10px);
          flex-shrink: 1;
          padding: 0 6px;
          font-size: 11px;
          line-height: 16px;
          border-radius: 8px;
          background: $mediumTextColor;
          color: #fff;
        }
      }

      .toggle {
        position: absolute;
        top: 7px;
      }

      ul {
        display: none;
      }

      &.expanded > ul {
        display: block;
      }
    }
  }
}

.content.has-sidebar:not(.hiding-sidebar) {
  @include margin-left(218px);
}

nav > ul > li > .toggle {
  @include left(-20px);
}

nav > ul > li > ul > li > .toggle {
  @include left(0px);
}

nav > ul > li > ul > li > ul > li > .toggle {
  @include left(20px);
}

nav > ul > li > ul > li > ul > li > ul > li > .toggle {
  @include left(40px);
}

nav > ul > li > ul > li > ul > li > ul > li > ul > li .toggle {
  @include left(60px);
}

/* retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
  #main-container {
    #main {
      #main-content {
        #details {
          .spinner {
            background-image: url(../images/spinner_details_2x.gif);
          }
        }
      }
    }
  }
  #upgrademodal.loading {
    background-image: url(../images/spinner_big_2x.gif);
    background-size: 48px;
  }
  #upgrademodal-success {
    .message {
      background-image: url(../images/success_2x.png);
      background-size: 48px;
    }
  }
}