/**
 * Copyright © 2016-2019 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.
 */
:host {
  width: 100%;
}

:host ::ng-deep {

  .tb-side-menu,
  .tb-side-menu ul {
    padding: 0;
    margin-top: 0;
    list-style: none;
  }

  .tb-side-menu > li {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
  }

  button {
    display: flex;
    width: 100%;
    max-height: 40px;
    padding: 0 16px;
    margin: 0;
    overflow: hidden;
    line-height: 40px;
    color: inherit;
    text-align: left;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    &:hover {
      background-color: rgba(255,255,255,0.08);
    }

    .mat-button-wrapper {
      width: 100%;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  button.tb-active {
    font-weight: 500;
    background-color: rgba(255, 255, 255, .15);
  }

  span.tb-toggle-icon {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  mat-icon {
    margin-right: 8px;
    margin-left: 0;
  }

  .tb-menu-toggle-list button {
    padding: 0 16px 0 32px;
    font-weight: 500;
    text-transform: none;
    text-rendering: optimizeLegibility;
  }

  .tb-button-toggle .tb-toggle-icon {
    display: inline-block;
    width: 15px;
    margin: auto 0 auto auto;
    background-size: 100% auto;

    transition: transform .3s, ease-in-out;
  }

  .tb-button-toggle .tb-toggle-icon.tb-toggled {
    transform: rotateZ(180deg);
  }

  .tb-menu-toggle-list {
    position: relative;
    z-index: 1;
    overflow: hidden;

    transition: .75s cubic-bezier(.35, 0, .25, 1);

    transition-property: height;

    button {
      padding: 0 16px 0 32px;
      font-weight: 500;
      text-transform: none !important;
      text-rendering: optimizeLegibility;
    }
  }

}