@import "../valo/valo";
@import "../../vaadin-spreadsheet/src/main/webapp/VAADIN/addons/spreadsheet/spreadsheet-flow";

$gray: #d1d1cf;
$green: #40b527;
$darkgreen: darken($green, 30%);
$spreadsheet-popup-overlay-bg-color: white;

// Prefix all selectors in your theme with .demo
.spreadsheetport {

  // Include valo theme styles in your theme
  @include valo;

  @include spreadsheet;

  // You can style your demo app right here
  /*
  .demoContentLayout {
      background-color: $gray;
      background-image: url(images/radial-gradient.png);
      background-size: 90%;
      background-position: center center;
      background-repeat: no-repeat;
  }
   */

  // You can also customize your component for the demo
  // app, but remember that these styles are not part of
  // the component. To include built-in CSS for your component,
  // edit client/styles.css under java sources
  /*
  div.v8addon {
      color: $green;
      font-size: 50pt;
      font-weight: bold;
      text-shadow: 0px 3px 0px $darkgreen,
           0px 14px 10px rgba(0,0,0,0.15),
           0px 24px 2px rgba(0,0,0,0.1),
           0px 34px 30px rgba(0,0,0,0.1);
      text-align: center;
  }
   */
}

/* CELL COMMENT OVERLAY STYLES */
.v-spreadsheet-comment-overlay {
  background: $cell-comment-bg-color;
  border: 1px solid $cell-comment-border-color;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;

  .popupContent {
    overflow: visible;
  }

  .comment-overlay-author {
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    padding-bottom: 6px;
  }

  .comment-overlay-invalidformula {
    color: $v-error-indicator-color;
    max-width: 200px;
    max-height: 150px;
    white-space: pre-wrap;
  }

  .comment-overlay-label {
    max-width: 200px;
    max-height: 150px;
    white-space: pre-wrap;
  }

  .comment-overlay-input {
    max-width: 200px;
    max-height: 150px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    outline: none;
    background: $cell-comment-bg-color;
    border: none;
  }

  .comment-overlay-separator {
    border-bottom: $spreadsheet-border;
    margin-bottom: 7px;
  }
}

// FILTER OVERLAY STYLES
.v-spreadsheet-popupbutton-overlay {
  background-color: $popup-overlay-bg-color;
  color: $popup-overlay-text-color;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
  padding: 5px;

  .v-panel.spreadsheet-item-filter-layout {
    background-color: transparent;
    border: none;
    color: $popup-overlay-text-color;
    height: $popup-button-overlay-height;
    .v-panel-captionwrap,
    .v-panel-content,
    .v-panel-deco {
      background-color: transparent;
      border: none;
      color: $popup-overlay-text-color;
    }
    .v-panel-content {
      height: 100%;
    }
  }
}

.v-spreadsheet-popupbutton-overlay-header {
  background: $popup-overlay-bg-color;
  height: 20px;
  position: relative;
  width: 100%;
  padding-bottom: 8px;

  .v-window-closebox {
    position: absolute;
    left: 2px;
    top: 0px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: $popup-overlay-text-color;
  }

  .header-caption {
    color: $popup-overlay-text-color;
    font-size: 16px;
    margin: 0 30px;
    text-align: center;
    height: 20px;
    line-height: 20px;
  }
}