/*!
 * Decko: [[https://decko.org]]
 * Copyright 2015 Grass Commons and other contributors; Licensed GPL
 */

/*
  These styles are intended to help bridge the default card context with bootstrap styling.
  Note: these styles do not appear in pre-bootstrap skins.
*/

$label_color: $gray-600;
$header_color: $gray-200;
$credit_color: $primary;
// $bar-border-color: $grey-100;
// $box-border-color: $grey-100;
$bar_stripe_color: $gray-700;
$box_stripe_color: $gray-700;

header {
  a {
    font-size: 1.3em;
  }
}

@media print {
  header {
    display: none;
  }
}

.card-menu  a {
  color: inherit;
}

label,
.navbox-item-label {
  color: $label_color;
}
table {
  border-collapse: collapse;
}
th {
  color: $label_color;
  font-weight: normal;
  font-style: italic;
}
td, th {
  vertical-align: top;
  padding: 0px;
}
a:link,
a:visited {
	text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}
form {
  margin: 0px;
  padding: 0px;
}

.link-muted {
  color: $text-muted;
  &:hover {
    color: inherit;
  }
}

.grow-1 {
  flex-grow: 1;
}
.grow-2 {
  flex-grow: 2;
}

/*-------- Special Pages --------*/

/*-- sign in page --*/

#sign-in input#login_field,
#sign-in input#password,
#forgot-password input#email {
  width: 50%;
}
#forgot-password {
  margin-top: 40px;
}


body.mceContentBody {
  margin: 4px;
}


/*----------- Sidebar -------------*/

.row.row-offcanvas {
  > aside, article {
    margin: 0;
  }
}

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }

  .sidebar-offcanvas-right {
    right: -41.6%;
  }

  .sidebar-offcanvas-left {
    left: -41.6%;
  }
  .row-offcanvas.right-active {
    right: 41.6%;
  }
  .row-offcanvas.left-active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute !important;
    top: 0 !important;
    width: 41.6% !important;
  }
}

.offcanvas-toggle {
  font-size: 10px !important;
  padding: 5px !important;
  margin-bottom: 15px !important;
}

/*---------- Card menu ------------*/

@include media-breakpoint-up(xs) {
  .card-slot > .d0-card-frame, .card-slot {
    > .menu-slot > .vertical-card-menu._show-on-hover {
      .btn-group.slotter {
        display: none;
        &.open {
          display: inline-block;
        }
      }
    }
  }

  .card-slot:hover > .d0-card-frame, .card-slot:hover {
    > .menu-slot > .vertical-card-menu._show-on-hover .btn-group.slotter {
      display: inline-block;
    }
  }
}

/*----------- Change View ---------*/

.change-view {
  padding: 5px 0px;
  border-bottom: 1px dotted $border-color;
  .change-card{
    font-weight: bold;
  }
  .last-update {
    color: $label_color;
  }
}

.titled-view > .d0-card-header {
  font-size: 1.3em;
  margin: 3px 0
}

/*---------- ( Richtext )-------------*/

.table-of-contents {
  background: $header_color;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 4px;
  margin: 5px 20px 20px 20px;
  h5 {
    margin: 0 0 0 40px;
  }
  ol {
    list-style-type: upper-roman;
    ol {
      list-style-type: upper-alpha;
      padding-left: 25px
    }
  }
}


/* CARDTYPE_SPECIFIC ------------------------------*/


.TYPE-toggle.d0-card-content {
  font-style: italic;
}

.TYPE-image.d0-card-content, .TYPE-image .d0-card-body {
  img {
    max-width: 100%;
  }
}

/*---------( Search ) ---------- */

.search-keyword {
  font-style: italic;
}

.search-count {
  float: right;
  color: $label_color;
}


/*----------- (Account Request)--------------*/

.invite-links {
  padding: 10px;
  margin-top: 10px;
  background: $header_color;
  text-align: center;
}
.invite-links a {
  font-weight: bold;
  margin: 0 20px;
}


/*---------- comments -------------------------------------- */

.comment-box {
  padding: 8px;
  margin: 0px;
  input {
    padding: 0px;
  }
  textarea {
    margin-bottom:5px;
  }
}
.w-comment-author {
  font-style: italic;
  margin-left: 10px;
}


.SELF-Xlogo.content_panel-view,
.SELF-Xcredit.content_panel-view {
  text-align: center;
  background: $white;
  img {
    max-width: 100%;
  }
  a {
    color: $credit_color;
  }
}

.closed-content {
  font-size: 1em !important;
  padding:10px;
}


/* english content in css.  ugh */
.search-no-results:after {
  content:'0 results';
}
.closed-content .search-no-results:after {
  content:'';
}

/*---------- Modal Window -------------------------------------- */

.modal-menu .close{
  font-size: 16px;
  margin-left: 10px;

}

/*-------- Help Texts --------*/
 .alert-info p:last-child {
   margin-bottom: 0;
 }

/*-------- Toolbar --------*/
.toolbar-close {
  font-size: 20px !important;
  font-weight: bolder !important;
}

/*-------- Icon Helpers --------*/
.toggler>i.material-icons{
  color: $black;
  font-size: 15px;
  font-weight: bolder!important;
  border: 2px solid $black;
  border-radius: 3px;
  margin-right: 3px;
}

/* Material icon placement */
.material-icons {
  vertical-align: sub;
  font-size: medium;
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }


/*----------- Borders -------------*/
.border-all{
  border-width: 1px;
  border-style: solid;
}

.select2-container--bootstrap .select2-navbox-autocomplete.select2-selection--multiple {
  .select2-selection__choice {
    background: none !important;
    border: none !important;
  }

  .select2-selection__choice__remove {
    display: none !important;
  }
}

/*----------- Bars and Boxes -------------*/

.expanded-bar, .bar, .box {
  .missing-view {
    // TODO: obviate in ruby with better unknown API
    display: none;
  }
  div, span, a {
    overflow: hidden;
  }
}

.item-box {
  display: inline-block;
  min-width: 260px;
  width: 15%;
  padding: 10px 1%;
  vertical-align: top;
}

.box-top {
  display: flex;
  min-height: 60px;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  h1, h2, h3, h4, h5, h6, div, span, a {
    white-space: nowrap;
    overflow:  hidden;
    text-overflow: ellipsis;
  }
}

.box-middle {
  min-height: 180px;
  img {
    object-fit: contain;
    height: 130px;
    width: 190px;
  }
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar {
  border-left: 3px solid $bar_stripe_color !important;
}

.box {
  border-top: 3px solid $box_stripe_color !important;
}

.badge {
  vertical-align: text-top!important;
}