/**
 * Copyright © 2016-2018 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "~compass-sass-mixins/lib/compass";

@import "constants";

@import "animations";

@import "mixins";

@import "fonts";

/***************
 * TYPE DEFAULTS
 ***************/

button,
html,
input,
select,
textarea {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mdi-set {
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga"; /* stylelint-disable-line property-no-vendor-prefix */
}

a {
  font-weight: 400;
  color: #106cc8;
  text-decoration: none;
  border-bottom: 1px solid rgba(64, 84, 178, .25);

  @include transition(border-bottom .35s);
}

a:hover,
a:focus {
  border-bottom: 1px solid #4054b2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 4rem;
}

h2 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3.2rem;
}

h3 {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: .005em;
}

h4 {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: .01em;
}

p {
  margin: .8em 0 1.6em;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: .01em;
}

strong {
  font-weight: 500;
}

blockquote {
  padding-left: 16px;
  margin-left: 0;
  font-style: italic;
  border-left: 3px solid rgba(0, 0, 0, .12);
}

fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

/*********************************
 * MATERIAL DESIGN CUSTOMIZATIONS
 ********************************/

a.md-button {
  border-bottom: none;
}

form {
  md-content {
    background-color: #fff;
  }
}

md-bottom-sheet .md-subheader {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.md-chips {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

md-content.md-default-theme,
md-content {
  background-color: $gray;
}

md-card {
  background-color: #fff;

  h2:first-of-type {
    margin-top: 0;
  }
}

.md-button:not([disabled]).md-icon-button:hover {
  background-color: rgba(158, 158, 158, .2);
}

md-toolbar:not(.md-hue-1),
.md-fab {
  fill: #fff;
}

md-toolbar md-input-container .md-errors-spacer {
  min-height: 0;
}

md-toolbar {
  md-select.md-default-theme:not([disabled]):focus .md-select-value,
  md-select:not([disabled]):focus .md-select-value {
    color: #fff;
  }
}

md-menu-item {
  overflow: hidden;
  fill: #737373;

  .md-button {
    display: block;

    .tb-alt-text {
      float: right;
    }
  }
}

div.md-toast-text {
  width: 100%;
  max-width: 500px;
  max-height: inherit;
  word-wrap: break-word;
}

md-toast .md-button {
  min-width: 88px;
}

md-sidenav {
  overflow: hidden;
  fill: #737373;
}

.md-panel-outer-wrapper {
  overflow-y: auto;
}

.md-radio-interactive input,
button {
  pointer-events: all;
}

.md-color-picker-input-container {
  md-input-container {
    margin-bottom: 0;
  }
}

/***********************
 * THINGSBOARD SPECIFIC
 ***********************/

$swift-ease-out-duration: .4s !default;
$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;

$input-label-float-offset: 6px !default;
$input-label-float-scale: .75 !default;

label {
  &.tb-title {
    padding-bottom: 15px;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    pointer-events: none;

    &.no-padding {
      padding-bottom: 0;
    }

    &.tb-required::after {
      font-size: 13px;
      color: rgba(0, 0, 0, .54);
      vertical-align: top;
      content: " *";
    }

    &.tb-error {
      color: rgb(221, 44, 0);

      &.tb-required::after {
        color: rgb(221, 44, 0);
      }
    }
  }
}

.tb-noselect {
  user-select: none;
}

.tb-readonly-label {
  color: rgba(0, 0, 0, .54);
}

.tb-disabled-label {
  color: rgba(0, 0, 0, .44);
}

/* stylelint-disable-next-line no-duplicate-selectors */
label {
  &.tb-small {
    font-size: 12px;
    color: rgba(0, 0, 0, .54);
    pointer-events: none;
  }
}

div {
  &.tb-small {
    font-size: 14px;
    color: rgba(0, 0, 0, .54);
  }
}

.tb-hint {
  padding-bottom: 15px;
  font-size: 12px;
  line-height: 14px;
  color: #808080;
  transition: all .3s cubic-bezier(.55, 0, .55, .2);

  &.ng-hide,
  &.ng-enter,
  &.ng-leave.ng-leave-active {
    bottom: 26px;
    opacity: 0;
  }

  &.ng-leave,
  &.ng-enter.ng-enter-active {
    bottom: 7px;
    opacity: 1;
  }
}

.md-caption {
  &.tb-required::after {
    font-size: 10px;
    color: rgba(0, 0, 0, .54);
    vertical-align: top;
    content: " *";
  }
}

pre.tb-highlight {
  display: block;
  padding: 15px;
  margin: 20px 0;
  overflow-x: auto;
  background-color: #f7f7f7;

  code {
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    font-family: monospace;
    font-size: 16px;
    font-weight: 700;
    color: #303030;
    vertical-align: bottom;
  }
}

.tb-notice {
  padding: 15px;
  font-size: 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.tb-data-table {
  md-toolbar {
    z-index: 0;
  }

  md-toolbar.md-table-toolbar.md-default-theme:not(.md-menu-toolbar).md-default .md-button[disabled],
  md-toolbar.md-table-toolbar:not(.md-menu-toolbar).md-default .md-button[disabled] {
    color: rgba(0, 0, 0, .38);
  }

  md-toolbar.md-default-theme:not(.md-menu-toolbar) .md-button[disabled] md-icon,
  md-toolbar:not(.md-menu-toolbar) .md-button[disabled] md-icon {
    color: rgba(0, 0, 0, .28);
  }

  span.no-data-found {
    position: relative;
    display: flex;
    height: calc(100% - 57px);
    text-transform: uppercase;
  }

  table.md-table {
    &.md-row-select td.md-cell,
    &.md-row-select th.md-column {
      &:first-child {
        width: 20px;
        padding: 0 0 0 12px;
      }

      &:nth-child(2) {
        padding: 0 12px;
      }

      &:nth-child(n+3):nth-last-child(n+2) {
        padding: 0 28px 0 0;
      }
    }

    &:not(.md-row-select) td.md-cell,
    &:not(.md-row-select) th.md-column {
      &:first-child {
        padding: 0 12px;
      }

      &:nth-child(n+2):nth-last-child(n+2) {
        padding: 0 28px 0 0;
      }
    }

    td.md-cell,
    th.md-column {
      &:last-child {
        padding: 0 12px 0 0;
      }
    }
  }

  table.md-table,
  table.md-table.md-row-select {
    tbody {
      &.md-body {
        tr {
          &.md-row:not([disabled]) {
            outline: none;

            &:hover {
              background-color: rgba(221, 221, 221, .3) !important;
            }

            &.md-selected {
              background-color: rgba(221, 221, 221, .5) !important;
            }

            &.tb-current,
            &.tb-current:hover{
              background-color: rgba(221, 221, 221, .65) !important;
            }
          }
        }
      }

      tr {
        td {
          &.tb-action-cell {
            width: 72px;
            min-width: 72px;
            max-width: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .md-button {
              &.md-icon-button {
                width: 36px;
                height: 36px;
                padding: 6px;
                margin: 0;
              }
            }

            .tb-spacer {
              padding-left: 38px;
            }
          }
        }
      }
    }
  }
}

.tb-severity {
  font-weight: 700;

  &.tb-critical {
    color: #f00 !important;
  }

  &.tb-major {
    color: #ffa500 !important;
  }

  &.tb-minor {
    color: #ffca3d !important;
  }

  &.tb-warning {
    color: #abab00 !important;
  }

  &.tb-indeterminate {
    color: #008000 !important;
  }
}

.tb-card-description {
  font-size: 13px;
  color: rgba(0, 0, 0, .54);

  @include line-clamp(2, 1.1);
}

/***********************
 * Flow
 ***********************/
$previewSize: 100px !default;

.file-input {
  display: none;
}

.tb-flow-drop {
  position: relative;
  height: $previewSize;
  overflow: hidden;
  border: dashed 2px;

  label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    text-align: center;

    @media (min-width: $layout-breakpoint-sm) {
      font-size: 24px;
    }
  }
}

.tb-container {
  position: relative;
  padding: 10px 0;
  margin-top: 32px;
}

/***********************
 * Prompt
 ***********************/

.tb-prompt {
  display: flex;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(0, 0, 0, .38);
  text-transform: uppercase;
}

/***********************
 * Errors
 ***********************/

.tb-error-messages {
  height: 24px; //30px
}

.tb-error-message {
  padding: 10px 0 0 10px;
  margin-top: -6px;
  overflow: hidden;
  font-size: 12px;
  line-height: 14px;
  color: rgb(221, 44, 0);
}

.tb-error-message.ng-animate {
  @include transition(all .3s cubic-bezier(.55, 0, .55, .2));
}

.tb-error-message.ng-enter-prepare,
.tb-error-message.ng-enter {
  margin-top: -24px;
  opacity: 0;
}

.tb-error-message.ng-enter.ng-enter-active {
  margin-top: -6px;
  opacity: 1;
}

.tb-error-message.ng-leave {
  margin-top: -6px;
  opacity: 1;
}

.tb-error-message.ng-leave.ng-leave-active {
  margin-top: -24px;
  opacity: 0;
}

/***********************
 * Tabs
 ***********************/

md-tabs.tb-headless {
  margin-top: -50px;
}

/***********************
 * Buttons
 ***********************/

.md-button.tb-card-button {
  width: 100%;
  max-width: 240px;
  height: 100%;

  span {
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    padding: 0 0 20px 0;
    margin: auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    white-space: normal;
  }
}

.md-button.tb-layout-button {
  width: 100%;
  max-width: 240px;
  height: 100%;

  span {
    padding: 40px;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    white-space: normal;
  }
}

.md-button.tb-add-new-widget {
  padding-right: 12px;
  font-size: 24px;
  border-style: dashed;
  border-width: 2px;
}

/***********************
 * Header buttons
 ***********************/

section.tb-header-buttons {
  position: absolute;
  top: 86px;
  right: 0;
  z-index: 3;
  pointer-events: none;

  @media (min-width: $layout-breakpoint-sm) {
    top: 86px;
  }
}

section.tb-top-header-buttons {
  top: 23px;
}

.tb-header-buttons .tb-btn-header {
  @include animation(tbMoveFromTopFade .3s ease both);
  position: relative !important;
  display: inline-block !important;
}

.tb-header-buttons .tb-btn-header.ng-hide {
  @include animation(tbMoveToTopFade .3s ease both);
}

/***********************
 * Footer buttons
 ***********************/

section.tb-footer-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 13;
  pointer-events: none;
}

.tb-footer-buttons .tb-btn-footer {
  @include animation(tbMoveFromBottomFade .3s ease both);
  position: relative !important;
  display: inline-block !important;
}

.tb-footer-buttons .tb-btn-footer.ng-hide {
  @include animation(tbMoveToBottomFade .3s ease both);
}

._md-toast-open-bottom .tb-footer-buttons {
  @include transition(all .4s cubic-bezier(.25, .8, .25, 1));

  @include transform(translate3d(0, -42px, 0));
}

/***********************
 * Icons
 ***********************/

.md-icon-button.tb-md-32 {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: middle;
}

.material-icons.tb-md-20 {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  font-size: 20px;
}

.material-icons.tb-md-96 {
  width: 96px;
  height: 96px;
  font-size: 96px;
}

/***********************
 * Layout
 ***********************/

.tb-absolute-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.tb-progress-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  opacity: 1;
}

/***********************
 * ACE
 ***********************/

.ace_editor {
  font-size: 16px !important;
}