/**
 * Copyright © 2016-2021 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 "../../../../../scss/constants";

:host {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .settings-card {
    margin: 8px;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .details-toolbar {
      height: 84px;
      min-height: 84px;
      border-radius: 4px 4px 0 0;
      background: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);

      .mat-toolbar-tools {
        padding: 0 8px;
      }

      .tb-details-title-header {
        min-width: 0;
        width: auto;
      }

      .tb-details-title {
        font-size: 1rem;
        font-weight: 500;

        @media #{$mat-gt-sm} {
          font-size: 1.2rem;
        }
      }

      .tb-details-subtitle {
        font-size: 0.9rem;
        opacity: .8;
      }

      .tb-ellipsis {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    @media #{$mat-md} {
      width: 80%;
    }

    @media #{$mat-gt-md} {
      width: 60%;
    }

    .tb-header-button {
      .tb-btn-header {
        position: relative !important;
        display: inline-block !important;
        animation: tbMoveFromTopFade .3s ease both;

        &.tb-hide {
          animation: tbMoveToTopFade .3s ease both;
        }
      }
    }
  }
}

:host ::ng-deep {
  .tb-help {
    .mat-icon-button.mat-primary {
      color: rgba(0, 0, 0, 0.52);
    }
  }

  .mat-card-content {
    position: relative;
    overflow: hidden;

    > .mat-tab-group {
      > .mat-tab-body-wrapper {
        position: absolute;
        top: 49px;
        left: 0;
        right: 0;
        bottom: 0;
      }
      > .mat-tab-header {
        .mat-tab-label {
          min-width: 40px;
        }
      }
    }
  }
}