@import 'page_bundles/mixins_and_variables_and_functions';

.group-home-panel {
  margin-top: $gl-padding;
  margin-bottom: $gl-padding;

  .home-panel-avatar {
    width: $home-panel-title-row-height;
    height: $home-panel-title-row-height;
    flex-shrink: 0;
    flex-basis: $home-panel-title-row-height;
  }

  .home-panel-title {
    font-size: 20px;
    line-height: $gl-line-height-24;
    font-weight: bold;

    .icon {
      vertical-align: -1px;
    }

    .home-panel-topic-list {
      font-size: $gl-font-size;
      font-weight: $gl-font-weight-normal;

      .icon {
        position: relative;
        top: 3px;
        margin-right: $gl-padding-4;
      }
    }
  }

  .home-panel-title-row {
    @include media-breakpoint-down(sm) {
      .home-panel-avatar {
        width: $home-panel-avatar-mobile-size;
        height: $home-panel-avatar-mobile-size;
        flex-basis: $home-panel-avatar-mobile-size;

        .avatar {
          font-size: 20px;
          line-height: 46px;
        }
      }

      .home-panel-title {
        margin-top: 4px;
        margin-bottom: 2px;
        font-size: $gl-font-size;
        line-height: $gl-font-size-large;
      }

      .home-panel-topic-list,
      .home-panel-metadata {
        font-size: $gl-font-size-small;
      }
    }
  }

  .home-panel-metadata {
    font-weight: normal;
    font-size: 14px;
    line-height: $gl-btn-line-height;
  }

  .home-panel-description {
    @include media-breakpoint-up(md) {
      font-size: $gl-font-size-large;
    }
  }
}

.group-nav-container {
  .nav-controls {
    .group-filter-form {
      flex: 1 1 auto;
      margin-right: $gl-padding-8;
    }

    .dropdown-menu-right {
      margin-top: 0;
    }

    @include media-breakpoint-down(sm) {
      .dropdown,
      .dropdown .dropdown-toggle,
      .btn-success {
        display: block;
      }

      .group-filter-form,
      .dropdown {
        margin-bottom: 10px;
        margin-right: 0;
      }

      &,
      .group-filter-form,
      .group-filter-form-field,
      .dropdown,
      .dropdown .dropdown-toggle,
      .btn-success {
        width: 100%;
      }
    }
  }

  // Remove this selector once https://gitlab.com/gitlab-org/gitlab/-/issues/370050 is addressed.
  .scrolling-tabs-container {
    width: 100%;
  }
}