@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap");

$purple: #a348c0;

body.exercizer {
  --font-primary: 'Roboto';
  --font-secondary: 'Comfortaa', cursive;
  font-family: var(--font-primary);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-secondary);
    font-weight: 700 !important;
  }

  @import './components/bs5-forms';

  input[type="checkbox"][id^="ck-no-err-allowed-"],
  input[type="checkbox"][class*="sized"] {
    display: inline-block !important;
    width: 16px;
    height: 16px;
    accent-color: #3e9abc;
    vertical-align: middle;

    +i18n {
      &::before {
        display: none;
      }
    }
  }

  button, 
  .button {
    border-radius: 4px;
  }

  button>* {
    vertical-align: middle;
  }

  label[for^="ck-no-err-allowed"] {
    cursor: pointer;
  }

  .empty-state {
    min-height: 176px;

    img {
      height: 176px;
      width: 176px;
    }
  }

  .card-footer {
    background-color: #fafafa;
    border-top: 1px solid #f0f2f4;
  }

  .answer-choice {
    width: 72px;
    font-size: 12px;
  }

  .droppable {
    @include droppable;
    background: transparent;

    &.dragover {
      background: $light-grey;
    }
  }

  .helper-text {
    font-size: 12px;
    margin-top: 8px;
    display: block;
  }

  [contenteditable],
  [bind-html] {
    div[style*="width"] {
      width: 100% !important;
    }
  }

  .block-select-copy {
    @media only screen and (min-width: $fat-mobile) {
      display: flex;

      >div,
      >button {
        flex: 1;
        flex-basis: 0;
      }
    }
  }


  @media only screen and (max-width: $tablette) {
      header.main h1.application-title {
      margin-top: .5em;
    }
  }

  @media only screen and (max-width: $fat-mobile) {

    [contenteditable],
    [bind-html] {
      .image-container {
        padding: 0;
        width: 100% !important;
        height: auto !important;

        img {
          max-width: 100%;
          height: auto;
        }
      }
    }

    /* .droppable {
      width: auto !important;
    } */

    .simple-button {
      width: 100% !important;
    }
  }

  table {
    margin-bottom: 0;
    font-family: var(--font-primary);

    tr {
      &:first-child {
        border-top: 0;
      }
    }

    thead {
      tr {
        background-color: $pale-cyan;
        color: $grey-black;
        border: none;
      }

      th {
        font-size: 13px;
        font-weight: 600;

        &:first-child {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        
        &:last-child {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }
    }

    tbody {
      tr {
        &:hover {
          background: transparent !important;
        }
      }
    }

    .icon-close {
      display: inline-block;
      vertical-align: middle;
    }
  }

  share-panel {
    table {
      thead {
        tr {
          background-color: $primary;
        }
      }
    }
  }

  .btns {
    box-shadow: none;
  }

  explorer.selected{
    .container{
      border: initial;
    }
  }

  .datepicker table thead tr {
    background-color: $primary;
  }
}

#print-subject{
  width: 210mm;
  text-zone {
    max-height: none;
  }
  .base-image {
    img {
      aspect-ratio: 4 / 3;
      -o-object-fit: contain;
      object-fit: contain;
      width: 100%;
      max-height: 100%;
    }
  }
  color-adjust: exact;
  -webkit-print-color-adjust: exact !important;
  .app-title{
    padding-left: 1.6rem;
  }
  article{
    box-shadow: none;
    page-break-inside: avoid;
  }
  h4{
    font-size: 18px;
  }
  .options {
    min-height: auto;
    border: 1px solid #C7C7C7;
    border-radius: 8px;
    img{
      border-radius: 3px;
      //box-shadow: 1px 1px 3px rgb(0 0 0 / 15%);
      box-shadow: none;
      border: 1px dashed #c7c7c7;
    }
  }
  text-zone{
    border: 1px dashed #C7C7C7;
    box-shadow: none;
    &.noresponses{
      min-width: 80px;
    }
  }
  .zone-image {
    position: relative;
    border: 1px solid #C7C7C7;
    overflow: hidden;
    border-radius: 8px;
    article{
      background: transparent;
      text-zone{
        background: rgba(250, 250, 250, .8);
      }
    }
    image-zone{
      box-shadow: none;
      border: 1px dashed #c7c7c7;
    }
  }
  .zone-response{
    min-height: 50px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
  }
  .table-association{
    input{
      width: 100%;
    }
    th, input{
      text-align: center;
    }
  }
}

@media print, screen{
  #print-subject{
   image-zone {
      min-width: 100px;
      width: 100px;
      height: 100px;
      img{
        min-width: 100px;
        width: 100px;
        height: 100px;
        object-fit: cover;
      }
    }
    .options{
      img{
        min-width: 100px;
        width: 100px;
        height: 100px;
        object-fit: cover;
      }
    }
  }
}