@import 'src/@fuse/scss/fuse';

:host {
  width: 100%;

  .center {
    .header {
      .search-wrapper {
        border-radius: 28px;
        overflow: hidden;
        @include mat-elevation(1);

        .sidebar-toggle {
          margin: 0 0 0 6px;
          width: 56px;
          height: 56px;
          border-radius: 0;
          border-right: 1px solid;
        }

        .search {
          width: 100%;
          height: 56px;
          line-height: 56px;
          padding: 0 18px;

          input {
            height: 56px;
            min-height: 56px;
            max-height: 56px;
            padding: 0 16px;
            border: none;
            outline: none;
          }
        }
      }
    }

    .content-card {
      .toolbar {
        .toolbar-separator {
          height: 32px;
          width: 1px;
          margin: 0 12px;
        }
      }

      @include media-breakpoint('lt-xl') {
        app-pages-settings-dashboard-list {
          border-right: 0;
        }

        app-pages-settings-dashboard-list,
        app-pages-settings-dashboard-details {
          flex: 1 0 100%;
        }

        app-pages-settings-dashboard-details {
          display: none !important;
        }

        &.current-dashboard-selected {
          .toolbar {
            padding-left: 16px !important;

            .dashboard-selection {
              display: none !important;
            }
          }

          .content {
            app-pages-settings-dashboard-list {
              display: none !important;
            }

            app-pages-settings-dashboard-details {
              display: flex !important;
            }
          }
        }
      }
    }
  }
}
