/* Global styles */

@import './content-variables.scss';


// $tt-property-header-outline: #f7f7f7;
$tt-property-header-outline: #ccc;
// $tt-property-header-outline: red;
$tt-property-header-background: #f7f7f7;
$tt-property-header-color: #666;
$tt-property-grid: #f0f0f0;

/* Properties Panel */
.c-properties-pane {
  background-color: #fafafa;
  .title {
    border-top: solid 4px #dd0038;
    //color: #dd0038;
    padding-top: 2px;
    background-color: #ffffff;
    padding-bottom: 2px;
    //border-bottom: solid 1px #dd0038;
    border-bottom: solid 1px $tt-property-header-outline;
    margin-bottom: 2px;
  }
}
.tt-property-header {
  border-top: solid 1px $tt-property-header-outline;
  background-color: $tt-property-header-background;
  border-bottom: solid 1px $tt-property-header-outline;
  color: $tt-property-header-color;
  height: 20px;
  font-size: 13px;
}
.tt-property-element-unknown-type {
  font-size: 10px;
}
.c-element-properties {
  display: block;
  //margin-bottom: 2px;
  background-color: #ffffff;
}
.tt-property {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.c-property-label {
  display: block;
  flex: 1 0 0;
  text-align: right;
  padding-right: 8px;
  border-bottom: solid 1px $tt-property-grid;
  border-right: solid 1px $tt-property-grid;
  margin: 0px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  color: $c-property-label-color;
}
.c-property-value {
  display: block;
  flex: 2.5 0 0;
  text-align: left;
  padding-left: 8px;
  border-bottom: solid 1px $tt-property-grid;
  margin: 0px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: $c-property-value-color;
}
.c-property-label-and-value {
  display: block;
  flex: 2.5 0 0;
  text-align: left;
  padding-left: 8px;
  border-bottom: solid 1px $tt-property-grid;
  margin: 0px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: $c-property-value-color;
  // padding-left: 10px;
  // padding-right: 5px;
  select {
    // padding-left: 10px;
    // padding-right: 5px;
    text-align: right;
    font-size: 10px;
    color: $c-property-value-color;
  }
}
.tt-property-footer {
  border-bottom: solid 1px $tt-property-header-outline;
}
.input.tt-string-input {
  font-size: 13px;
  padding: 2px !important;
  border: none;
  //margin: 2px;
  //background-color: red;
}

/*
 *  Properties Editing.
 */
 // Transitions for properties editing.
 .c-property-list-transition-enter-active {
   // Slow arrival
   transition: opacity .7s;
 }
 .c-property-list-transition-leave-active {
   // Fast exit
   transition: opacity 0s;
 }
 .c-property-list-transition-enter, .c-property-list-transition-leave-to /* .property-list-transition-leave-active below version 2.1.8 */ {
   opacity: 0;
 }

.c-property-element {
  &.c-expanded.c-selected {
    .tt-property-header {
      position: relative;
      font-weight: bold;
      cursor: pointer;
    }
  }
  &.c-expanded.c-not-selected {
    .tt-property-header {
      position: relative;
      color: #dd0038;
      cursor: pointer;
    }
    .c-element-properties {
      background-color: #fff5f7;
    }
  }
}

// Components (toolbox) pane
.c-components-pane {
  //background-color: #f7f7f7;
  .title {
    border-top: solid 4px #dd0038;
    //color: #dd0038;
    padding-top: 2px;
    background-color: #ffffff;
    padding-bottom: 2px;
    //border-bottom: solid 1px #dd0038;
    //border-bottom: solid 1px $tt-property-header-outline;
    margin-bottom: 2px;
  }
}


 /*ZZZZZZZZZZ

 SHOULDN'T THIS BE SOMEWHERE ELSE???

ZZZZZZZZZZ*/

// Make the slides responsive
// From https://productforums.google.com/forum/#!topic/docs/tuufSoBoxKc
.content-google-slides-embed-container {
  position: relative;
  padding-bottom: 48.25%; /* 16/9 ratio */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}
.content-google-slides-embed-container iframe,
.content-google-slides-embed-container object,
.content-google-slides-embed-container embed {
  position: absolute;
  top: 3%;
  left: 2%;
  right: 2%;
  width: 96%;
  height: 96%;
}

// Make the sheets responsive
// From https://productforums.google.com/forum/#!topic/docs/tuufSoBoxKc
.content-google-sheets-embed-container {
  position: relative;
  padding-bottom: 48.25%; /* 16/9 ratio */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}
.content-google-sheets-embed-container iframe,
.content-google-sheets-embed-container object,
.content-google-sheets-embed-container embed {
  position: absolute;
  top: 3%;
  left: 2%;
  right: 2%;
  width: 96%;
  height: 96%;
}
.content-google-sheets-embed-container iframe {
  border: solid 2px #f0f0f0;
}

// Make the docs responsive
// From https://productforums.google.com/forum/#!topic/docs/tuufSoBoxKc
.content-google-docs-embed-container {
  position: relative;
  padding-bottom: 48.25%; /* 16/9 ratio */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}
.content-google-docs-embed-container iframe,
.content-google-docs-embed-container object,
.content-google-docs-embed-container embed {
  position: absolute;
  top: 3%;
  left: 2%;
  right: 2%;
  width: 96%;
  height: 96%;
}
.content-google-docs-embed-container iframe {
  border: solid 2px #f0f0f0;
}




.c-layout-mode-heading {
  display: relative;
  height: $c-heading-height;
  line-height: $c-heading-height;
  font-size: $c-heading-font-size;
  font-weight: bold;
  opacity: 0.5;
  margin-bottom: 1px;
  position: relative;
  text-align: left;
  padding-left: 3px;

  // Expand sideways to cover the dotted surround of the parent.
  margin-left: -2px;
  margin-right: -2px;

  // Colors, normally overidden by each widget
  color: darkgreen;
  background-color: lightgreen;

  .c-heading-icons {
    position: absolute;
    right: 5px;
    padding-top: 1px;
    font-size: 8px;

    span:hover {
      color: $c-editbar-color;
    }
  }
}

/*
 *  Toolbox icons
 */
.c-icon-section {
  background-image: url("../assets/icons/icon-section-26.png");
}
.c-icon-columns {
  background-image: url("../assets/icons/icon-columns-26.png");
}
.c-icon-container {
  background-image: url("../assets/icons/icon-container-26.png");
}
.c-icon-youtube {
  background-image: url("../assets/icons/icon-youtube-26.png");
}
.c-icon-text {
  background-image: url("../assets/icons/icon-text-26-2.png");
}
.c-icon-vimeo {
  background-image: url("../assets/icons/icon-vimeo-26.png");
}