.chat-browse-view {
  position: relative;
  height: calc(100vh - var(--header-offset) - var(--chat-header-offset));
  padding-top: 1em;
  padding-bottom: 41px;
  box-sizing: border-box;
  overflow-y: scroll;
  @include chat-scrollbar(var(--secondary));

  @include breakpoint(mobile-large) {
    padding-right: 1rem; //fix for different scroll behaviour on mobile where overflow-y:scroll acts like auto
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .new-channel-btn {
      margin-left: auto;
    }
  }

  &__title {
    box-sizing: border-box;
    margin-bottom: 0;
  }

  &__content_wrapper {
    margin: 2rem 0 0 1rem;
    box-sizing: border-box;

    @include breakpoint(tablet) {
      margin-top: 1rem;
    }
  }

  &__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2.5rem;

    @include breakpoint(tablet) {
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 1.5rem;
    }
  }

  &__actions {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 0 0 0 1rem;

    @include breakpoint(tablet) {
      flex-direction: column;

      .dc-filter-input-container {
        margin-top: 1rem;
      }

      .dc-filter-input-container,
      nav {
        width: 100%;
      }
    }
  }

  &__filters {
    display: flex;
    align-items: center;
    margin: 0;
    &:before {
      content: none; //there is a strange thing applied on nav-pills and this resets it
    }

    @include breakpoint(mobile-large) {
      justify-content: space-between;
    }
  }

  &__filter {
    display: inline;
    margin-right: 1em;

    &:last-of-type {
      margin-right: 0;
    }

    @include breakpoint(mobile-large) {
      margin: 0;
    }
  }

  &__filter-link,
  &__filter-link:visited {
    color: var(--primary);
    font-size: var(--font-up-2);
    padding: 0 0.25rem;

    @include breakpoint(tablet) {
      font-size: var(--font-up-1);
    }
  }

  .chat-channel-card {
    .chat-channel-card__leave-btn {
      padding: 0;
      &:hover,
      &:focus {
        background: none;
      }

      &:focus {
        @include default-focus;
      }
    }
  }
}