.profile-banner {
  background-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
  // background-image: url("../../images/banners/banner-background.png");
  padding-top: 16px;
  min-height: 120px;
  border-bottom: 1px solid $color-border;
  overflow: hidden;
  position: sticky;
  top: 50px;
  z-index: 999;

  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #e7f4ee;
    background-image: url("../../images/banners/banner-overlay.png");
    background-position: 0% 0%;
    backdrop-filter: blur(142px);
    z-index: -1;
    background-repeat: round;
    opacity: 0.95;
  }
}

.solid-tab {
  ul {
    border-color: transparent !important;
  }
  li {
    a {
      padding: 16px 0px !important;
      margin-right: 32px;
      transition: 0.3s ease-in-out;
      border-bottom-color: transparent;
    }

    &.is-active,
    &:hover {
      a {
        border-bottom-color: transparent !important;
        position: relative;
        color: $ac-primary;
        &::after {
          position: absolute;
          content: "";
          left: 0;
          bottom: -1px;
          width: 100%;
          height: 4px;
          border-radius: 4px 4px 0 0;
          z-index: 1;
          background-color: $ac-primary;
        }
      }
    }
  }
}

.body-bottom {
  .cluster {
    background-color: $primary-light-gray;
  }
}

.filterable-searchbar {
  width: 100%;
  position: relative;

  .search-filter {
    border: 1px solid $color-border;
    background-color: #fff;
    position: absolute;
    z-index: 9;
    right: 4px;
    height: 36px;
    top: 4px;
    padding: 8px 16px;
    border-radius: 4px;

    &:focus {
      outline: 1px solid $color-border-dark;
    }
  }

  .searchbar {
    width: 100%;
  }

  .ac-single-input {
    input {
      background-color: $primary-light-gray;
      height: 44px !important;
    }

    label {
      top: 13px !important;
    }
  }
}

// sidebar items
.sidebar-style-2 {
  border: 1px solid $color-border;
  border-radius: 4px;
  box-shadow: 8px 4px 14px 0px rgba(0, 0, 0, 0.05);

  .left-sidebar {
    width: 250px;
  }

  .sidebar-items {
    display: flex;
    flex-direction: column;

    .sidebar-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: $color-text;
      padding: 8px 14px;
      transition: 0.1s ease-in-out;
      margin-inline: 2px;
      border-radius: 4px;

      &:last-child {
        margin-bottom: 8px;
      }

      &:hover {
        background-color: $primary-light-gray;
      }

      &.is-active {
        background-color: $ac-primary;
        color: $white-100;
      }
    }

    .label {
      border-bottom: 1px solid $color-border;
      font-weight: 400 !important;
      color: $color-heading;
    }
  }
}

.section-card:not(.reset-style) {
  border: 1px solid $color-border;
  border-radius: 4px;
  height: -webkit-fill-available;
  min-width: 250px;
  .section-heading {
    border-bottom: 1px solid $color-border;
    background-color: $secondary-light-grey;
    padding: 8px 16px;
  }
}

.more-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid $color-border;
  border-radius: 50%;
  font-size: 10px;
  padding: 4px;
  cursor: pointer;
  background-color: $primary-light-gray;
}
.avatar-group {
  display: flex;
  gap: 4px;
  .more-avatar {
    margin-left: -8px;
    z-index: 9;
  }
  .avatar-link {
    display: inline-block;
    &:hover {
      z-index: 9;
    }

    &:not(:first-child) {
      margin-left: -4px;
    }
  }
}
.ac-back-button {
  background-color: $gray-90;
  border: 1px solid $color-border;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  color: $gray-20;
  transition: 0.3s ease-in-out;
  display: flex;
  align-items: center;

  &:hover {
    border: 1px solid $color-border;
    background-color: $ac-primary;
    color: $white-100;
  }
}