@import "variables";

:host {
  display: block;
}

@media screen and (min-width: $medium) {
  :host {
    display: flex;
  }

  .new-role {
    border-bottom: 1px solid mat-color($app-foreground, divider);
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

data-table {
  flex: 1 1 auto;
}

@media screen and (max-width: $medium) {
  .admin-pill-nav {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
  }

  .admin-pill-nav-mobile-selector {
    margin-left: 15px;
  }

  .new-role-button {
    height: 56px; // mobile-select-height
  }
}