// Access to Bootstrap variables and mixins
@import '~ChillMainAssets/module/bootstrap/shared';

// Chill variables
@import './scss/chill_variables';

// Chill mixins
@import './scss/mixins';

// Chill buttons
@import './scss/buttons';

// Chill badges
@import './scss/badge';

// Chill forms
@import './scss/forms';

// Chill record_actions
@import './scss/record_actions';

// Chill entity render box system
@import './scss/render_box';

// Chill flex responsive table/block presentation
@import './scss/flex_table';

// Specific templates
@import './scss/notification';

/*
 *    BASE LAYOUT POSITION
 */

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   footer {
      margin-top: auto;
   }
}

header {
   nav.navbar {
      padding: 0;
      a.navbar-brand img {
         height: 50px;
         margin: 8px 0;
      }
      div.navbar-collapse {
         float: right;
      }
      ul.navbar-nav {
         display: flex;
         align-items: stretch;
         li.nav-item {
            display: flex;
            &.btn {
               padding-top: 0;
               padding-bottom: 0;
            }
            & > a {
               align-self: center;
            }
            form.form-inline {
               align-self: center;
               display: flex;
               input.form-control {
                  align-self: center;
                  height: 32px;
               }
            }
         }
      }
      div.dropdown-menu {
         margin: 0;
         padding: 0;
         border-radius: 0;
         a.dropdown-item {
            width: 120%;
            border: 0;
            border-bottom: 1px solid $gray-200;
            font-size: smaller;
            i {
               float: right; }
            &:hover {
               color: $gray-500 !important; }
         }
      }

      // fullwidth menu when navbar is collapsed
      @media (max-width: 767px) {
         & {
            position: relative;
         }
         button.navbar-toggler {
            float: right;
         }
         div.navbar-collapse {
            float: none;
            position: absolute;
            top: 4em;
            left: 0;
            right: 0;
            z-index: 2;
            padding: 1em;
            border-top: 1px solid shade-color($primary, 25%);
            ul.navbar-nav {
               display: grid;
               grid-template-areas:
                  "sear sear sear"
                  "sect user lang";
               li.nav-item {
                  flex-direction: column;
                  border: 0;
                  a.nav-link {}
                  &.navigation-search {
                     grid-area: sear;
                     margin-bottom: 1em;
                     form {
                        width: 100%;
                        input.form-control {}
                        button.btn {}
                     }
                  }
                  &.nav-section  { grid-area: sect; }
                  &.nav-user     { grid-area: user; }
                  &.nav-language { grid-area: lang; }
               }
               li.dropdown {
                  &, & > * {
                     background-color: transparent !important;
                  }
                  a.dropdown-toggle {}
                  div.dropdown-menu {
                     display: block;
                     border: 0;
                     a.dropdown-item {
                        width: 100%;
                        border: 0;
                        border-top: 1px dotted $gray-200;
                        background-color: transparent !important;
                     }
                  }
               }
            }
         }
      }

   }
}

div.banner {
   a {
      text-decoration: none;
      &.phone,
      &.email {
         color: $white;
      }
   }
   .id-number {
      font-weight: lighter;
      font-size: 50%;
      margin-left: 0.5em;
      &:before { content: '(n°'; }
      &:after { content: ')'; }
   }
   span.age {
      margin-left: 0.5em;
      &:before { content: '('; }
      &:after { content: ')'; }
   }
}

div.vertical-menu {
   border-radius: 0;
   margin-top: 0.5rem;
   a.list-group-item {
      background-color: $chill-yellow;
      border: 0;
      margin-bottom: 0.25rem;
      &:hover {
         background-color: tint-color($chill-yellow, 20%)
      }
   }
}

footer.footer {
   background: $dark;
   padding-top: 10px;
   padding-bottom: 10px;
   width: 100%;
   p {
      font-family: Open Sans;
      font-weight: 300;
      clear: both;
      color: $white;
      font-size: 0.9em;
      line-height: 1.5em;
      margin: auto;
      max-width: 35em;
      text-align: center;
      a, a:hover {
         text-decoration: underline;
      }
   }
}

/*
 *    GENERIC MAIN STYLES
 *    miscellaneous
 */

/// titles
h1, h2,
.h1, .h2  {
   font-weight: $headings-font-weight + 100;
}

/// typography
.open_sansbold {
   font-weight: bold;
}

/// no borders on head table
table.table-bordered {
   thead, thead * {
      border: 0 !important;
      text-align: center;
   }
}

/// comments quotes
.chill-user-quote {
   border-left: 10px solid $yellow;
   margin: 1.5em 10px;
   padding: 0.5em 15px;
   background-color: $gray-200;
   color: $gray-800;
   font-size: 90%;

    p {
        margin-bottom: 0.75rem !important;
    }

   // test a bottom right decoration (to be confirmed)
   &.test {
      position: relative;
      &:after {
         content: '';
         position: absolute;
         width: 0px; height: 0px;
         bottom: 0; right: 0;
         background: $white;
         border-top: 10px solid $gray-200;
         border-left: 10px solid $gray-200;
         border-right: 10px solid $white;
         border-bottom: 10px solid $white;
      }
   }

   // ckeditor citation
   blockquote p {
      font-style: italic;
      padding-left: 2em;
      quotes: "“" "„";
      position: relative;
      &:before {
         content: open-quote;
         font-size: 400%;
         color: $gray-400;
         position: absolute;
         top: -25px;
         left: 0;
      }
   }
}

div.metadata {
   font-size: smaller;
   color: $gray-600;
   span.user, span.date {
      text-decoration: underline dotted;
      &:hover {
         color: $gray-700;
      }
   }
}

/// chill help tooltip
.chill-help-tooltip {
   &::before {
      content: '\f05a';
      color: $chill-pink;
      font-family: ForkAwesome;
      font-style: normal;
      font-size: 120%;
      cursor: pointer;
      margin: auto 0.3em;
   }
}

/// display definition list
//  with dt and dd on same line
dl.definition-inline {
   dd {
      display: inline;
      margin: 0;
      &:after{
         display: block;
         content: '';
      }
   }
   dt{
      display: inline-block;
      min-width: 200px;
   }
}

/// when there is no data
.custom_field_no_data,
.chill-no-data-statement {
   font-style: italic;
   font-size: 90%;
}

/// flash
div#flashMessages {
    margin-top: 20px;
    .flash-notice {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/*
 *    SPECIFIC RULES
 */

//// still used ?
// move from chillmain.css, converted to sass

div#usefulbar {
   background-color: $yellow;
   z-index: 1000;
   padding-right: 15px;

   form {
      margin: 0;
   }
   i.menu {
      font-size: 2em;
   }
   ul {
      display: flex;
      justify-content: flex-end;
      margin: 0;
      padding-top: 5px;
      padding-right: 10px;
   }
   li {
      color: $white;
      margin-left: 10px;
      a {
         color: $white;
         text-shadow: 0px 0px 1px $gray-600;
      }
      i.icon-user-add {
         &:before {
            vertical-align: -5px;
         }
      }
      &#search_element {
         text-align: right;
         div#search_form {
            margin: 0;
            padding: 0;
            div, .field {
               margin: 0;
            }
            button {
               color: $white;
               border: none;
               bottom: -2px;
               height: 35px;
            }
         }
      }
   }
}

.personName {
   font-variant: small-caps;
   text-transform: capitalize;
}

// probably used in client chill.
// think to rename like above
input.belgian_national_number_inversed_date {
   width: 7em;
   margin-right: 1em;
}
input.belgian_national_number_daily_counter {
   width: 4em;
   margin-right: 1em;
}
input.belgian_national_number_control_digit {
   width: 3em;
}

//
input.belgian_national_number {
   &.inversed_date {}
   &.daily_counter {}
   &.control_digit {}
}

// replace abbr
span.item-key {
    font-variant: all-small-caps;
    font-size: 90%;
    background-color: #0000000a;
    //text-decoration: dotted underline;
}

// increase toast message z-index (above all modals)
div.v-toast {
   z-index: 10000!important;
}