@use "@material/rtl/_index" as rtl;
@use "@material/top-app-bar/_index" as top-app-bar;
@use "~/util";

.entries,
.entries-drawer .entries {
  &-drawer.mdc-drawer {
    height: calc(100vh - #{top-app-bar.$row-height});
    width: 320px;
    z-index: 1;
    position: fixed;
    top: top-app-bar.$row-height;
    bottom: 0;
  }
  &-list {
    &-container {
      width: 100%;
      .mdc-list-divider:last-child {
        display: none;
      }
    }
    .mdc-list {
      &-divider {
        @include rtl.reflexive-property(margin, 72px, 16px);
      }
      &-group {
        &__subheader {
          display: flex;
          align-items: center;
          .rmwc-icon {
            @include rtl.reflexive-box(margin, right, 38px);
          }
        }
      }
      &-item {
        padding: 0 16px;
        &__secondary-text {
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

.entries-drawer,
.entries-list-container {
  .filter-chips {
    height: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    position: relative;
    .mdc-chip-set {
      position: relative;
      height: 100%;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 4px 12px;
      padding-bottom: 32px;
      box-sizing: content-box;
      scroll-behavior: smooth;
      .mdc-chip {
        flex-shrink: 0;
      }
      .padding-fix {
        width: 12px;
        flex-shrink: 0;
        order: 9999;
      }
    }
    &-container {
      height: 48px;
      flex-shrink: 0;
      @include util.divider-border(bottom);
      display: flex;
      justify-content: stretch;
    }
  }
}
