/*!
 * 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;
  }
}

.d0-card-header a {
  color: $body-color;
  &.edit-link, &.bridge-link, &.help-link {
    color: $text-muted;
  }
}

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

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;
}


/*----------- Navbox --------------*/

.select2-navbox-dropdown > .select2-results > .select2-results__options {
  max-height: none !important;
}

.navbox-form {
  min-width: 50%;
  .select2-container {
    width: 100%
  }
}
/*----------- Sidebar -------------*/

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

/* collapsed sidebar styles */
@media screen and (max-width: 576px) {
  .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 > .d0-card-header,
  .card-slot > .d0-card-header,
  .card-slot.labeled-view > .labeled-content > .d0-card-body,
  .card-slot,
  .card > .card-body,
  .card > .card-header {
    > .card-menu._show-on-hover > a {
      display: none;
    }
  }
  .card-slot:hover > .d0-card-frame > .d0-card-header,
  .card-slot:hover > .d0-card-header,
  .card-slot.labeled-view:hover > .labeled-content > .d0-card-body,
  .card-slot:hover,
  .card:hover > .card-body,
  .card:hover > .card-header{
    > .card-menu._show-on-hover > a {
      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 > {
  > .d0-card-header-title .card-title {
    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
    }
  }
}

/*---------- ( Link list )-------------*/

.group-text-middle {
  border-left: none;
  border-right: none;
}

.group-text-left {
  border-right: none;
}

.group-text-right {
  border-left: none;
}


/* 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: 0.5em 0;
  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;
}

.modal-dialog.modal-full {
  max-width: 99%;
  margin: 1%;
}


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

/*-------- 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, .box {
  .unknown-view {
    // TODO: obviate in ruby with better unknown API
    display: none;
  }
}
.bar {
  border-left: 3px solid $bar_stripe_color !important;
  .bar-nav {
    width: 20px;
    margin-left: auto;
  }
  .media {
    width: 100%
  }
  .media-left {
    max-width: 25%
  }
  .bar-body {
    display: flex;
  }
  .bar-left, .bar-right, .bar-middle {
    display: flex;
    padding: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }
  .bar-left {
    font-weight: bold;
    align-items: flex-start;
  }
  .bar-middle {
    display: none;
    justify-content: center;
  }
  .bar-right {
    justify-content: flex-end;
  }
}

@include media-breakpoint-up(md) {
  .bar .bar-middle {
    display: flex;
  }
}

.bar-body {
  border: 1px solid $border-color;
  width: calc(100% - 20px)
}

.bar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 3px;
  a {
    color: $text-muted;
    &:hover {
      color: $primary;
    }
  }
}

@include media-breakpoint-up(sm) {
  .bar-nav {
    display: none;
  }
  .bar, .expanded-bar {
    &:hover .bar-nav {
      display: flex
    }
  }
}

.collapsed-bar {
  display: flex;
  justify-content: space-between;
}

.expanded-bar {
  margin: 0.5em 0;
  display: flex;
  > .bar-body {
    > .bar {
      border-bottom: 1px solid $border-color;
      display: flex;
    }
    > .bar-bottom {
      padding: 1em 1em 1em 2em;
      border-top: 0;
      overflow: hidden;
    }
  }

}

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

.box {
  width: 320px;
}

.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;
  }
  i {
    display: flex;
    justify-content: center;
    min-height: 130px;
    align-items: center;
    font-size: 70px;
    color: $text-muted;
  }
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

/*----------- Slim Select2 -------------*/

.slim-select2 {
  .select2-container--bootstrap {
    .select2-selection, &.select2-container--open .select2-selection {
      padding-top: 2px;
      height: 1.5rem;
    }

    .select2-selection--single .select2-selection__rendered {
      font-size: 80%;
    }

    .select2-results__option {
      font-size: 80%;
    }
  }
}