@use '../../theme/styles/globals' as *;

:host {
  $auth-layout-padding: 2.5rem;

  nb-card {
    margin: 0;
    height: calc(100vh - 2 * #{$auth-layout-padding});
  }

  .navigation .link {
    display: inline-block;
    text-decoration: none;

    nb-icon {
      font-size: 2rem;
      vertical-align: middle;
    }
  }

  .links nb-icon {
    font-size: 2.5rem;
  }

  nb-card-body {
    display: flex;
    width: 100%;
  }

  nb-auth-block {
    margin: auto;
  }

  @include media-breakpoint-down(sm) {
    nb-card {
      border-radius: 0;
      height: 100vh;
    }
  }

  ::ng-deep {
    nb-layout .layout .layout-container .content .columns nb-layout-column {
      padding: $auth-layout-padding;

      @include media-breakpoint-down(sm) {
        padding: 0;
      }
    }
  }
}