/**
 * Copyright © 2016-2022 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 {
  display: flex;
  flex: 1 1 0;

  .tb-two-factor-auth-login-content {
    background-color: #eee;

    .tb-two-factor-auth-login-card {
      padding: 48px 48px 48px 16px;

      @media #{$mat-gt-xs} {
        width: 450px !important;
      }

      .mat-card-title {
        font: 400 28px / 36px Roboto, "Helvetica Neue", sans-serif;
      }

      .mat-card-content {
        margin-top: 44px;
        margin-left: 40px;
      }

      .mat-body {
        letter-spacing: 0.25px;
        line-height: 16px;
        margin: 0;
      }

      .code-block {
        margin-top: 16px;
      }

      .providers-container {
        padding: 0;

        .mat-body {
          padding-bottom: 8px;
        }
      }

      .timer {
        font: 500 12px / 14px Roboto, "Helvetica Neue", sans-serif;
        color: rgba(255, 255, 255, 0.8);
      }

      .action-row:nth-child(n) {
        min-height: 36px;

        .action-resend {
          min-width: 50%;
        }
      }
    }
  }

  ::ng-deep {
    button.provider {
      text-align: start;
      font-weight: 400;

      &:not(.mat-button-disabled) {
        border-color: rgba(255, 255, 255, .8);
      }

      .icon {
        height: 18px;
        width: 18px;
        vertical-align: sub;
      }
    }

    .mat-form-field-invalid .mat-hint {
      margin-top: 20px;
    }
  }
}
