/* Global styles */

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

// .yarp {
//   background-image: url("../icons/icon-section-26.png");
// }

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

/* 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-left: $c-property-gutter-left;
  padding-right: 8px;
  border-bottom: solid 1px $tt-property-grid;
  border-right: solid 1px $tt-property-grid;
  margin: 0px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 18px;
  color: $c-property-label-color;
}
.c-property-value {
  display: block;
  flex: 2.5 0 0;
  text-align: left;
  padding-left: 8px;
  padding-right: $c-property-gutter-right;
  border-bottom: solid 1px $tt-property-grid;
  margin: 0px;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  color: $c-property-value-color;

  input.input {
    margin-top: 2px;
    font-size: 9px;
  }

  select.select {
    margin-top: 2px;
    font-size: 9px;
  }

  textarea {
    margin-top: 2px;
    font-size: 9px;
  }
}
.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: 11px;
  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;
    }
  }
}


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

  /*
   *  EditBarIcons component
   */
  .c-editbar-icons {
    position: absolute;
    right: 5px;
    margin-top: 1px;
    font-size: 8px;
    height: 12px;

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

    // EditbarIcons is also used in the properties pane.
    .c-gutter-right {
      width: $c-property-gutter-right;
    }
  }
}

/*
 *  Icons in the edit bar
 */
.c-editbar-icon {
  display: inline-block;
  margin-top: 0px;
  height: 12px;
  width: 12px;
  background-size: 12px 12px;
  cursor: pointer;
  opacity: 1.0;
  &:hover {
    //opacity: 0.4;
    background-color: white;
  }
}

// Icons in the property element header
.c-property-element-header-icon {
  display: inline-block;
  margin-top: 3px;
  height: 12px;
  width: 12px;
  background-size: 12px 12px;
  cursor: pointer;
  opacity: 0.4;
  &:hover {
    opacity: 1.0;
  }
}

/*
 *  Highlighting the selected property in the editor in view mode
 */
// .c-edit-mode-edit.c-selected {
//   -webkit-box-shadow: blue;
//   -moz-box-shadow: blue;
//   box-shadow: blue;
//
//   // Highlight the .highlight-when-selected element within the
//   // currently selected widget, but if the currently selected widget
//   // is a form, do not highlight all it's children. To accomplish
//   // this, .do-not-highlight-all-children should be set on the child
//   // elements of widgets that have children.
//   .do-not-highlight-all-children:not() {
//     .highlight-when-selected {
//       -webkit-box-shadow: $c-selected-shadow;
//       -moz-box-shadow: $c-selected-shadow;
//       box-shadow: $c-selected-shadow;
//     }
//   }
// }

/*
 *	Styles for our components.
 */
@import './components/content-toolbox.scss';
@import './components/content-layout-editor.scss';
@import './components/content-section.scss';
@import './components/content-container.scss';
@import './components/content-froala.scss';
@import './components/content-children.scss';
@import './components/content-form.scss';