.profile {
  &__avatar {
    @apply w-full h-full rounded-full overflow-hidden drop-shadow-md border-2 border-white;

    img {
      @apply w-full h-full object-cover;
    }

    &-container {
      @apply w-24 h-24 relative;
    }

    &-badge {
      @apply absolute top-full right-0 -translate-y-full grid place-items-center w-6 h-6 rounded-full overflow-hidden bg-primary border border-white;

      svg {
        @apply w-4 h-4 text-white fill-current;
      }
    }
  }

  &__details {
    @apply pb-3 space-y-2;

    &-data {
      @apply flex flex-wrap gap-x-6 gap-y-4;
    }

    &-item {
      @apply flex items-center space-x-1.5 whitespace-nowrap;

      svg {
        @apply w-3.5 h-3.5 text-gray fill-current;
      }

      span {
        @apply text-sm text-gray-2 lowercase truncate max-w-xs;
      }
    }
  }

  &__description {
    @apply py-3 last:pb-0 text-sm text-gray-2;
  }

  &__actions {
    &-main {
      @apply w-fit grid grid-cols-2 md:grid-cols-1 mx-auto gap-x-4 gap-y-6 md:gap-4;

      &__dropdown {
        @apply divide-y divide-gray-3 z-20 w-64;

        &-container {
          @apply relative;
        }

        &-trigger {
          @apply flex justify-center;
        }
      }

      /* overwrite default dropdown styles */
      [id*="dropdown-menu"] {
        @apply py-0 mx-0 w-full md:w-auto;

        &[aria-hidden="true"] {
          @apply md:hidden;
        }
      }

      [data-target*="dropdown"] {
        @apply [&>svg]:h-auto [&>svg]:w-auto last-of-type:[&>svg]:block;

        &:hover > svg,
        &:hover > span {
          @apply text-white;
        }
      }
    }

    &-secondary {
      @apply flex justify-center md:justify-between text-xs gap-2;
    }
  }

  &__tab {
    @apply grow rounded-t;

    &.is-active {
      @apply bg-white z-10 text-secondary font-semibold;
    }

    &-item {
      @apply w-full h-full p-2.5 flex flex-col md:flex-row items-center justify-center gap-2;

      svg {
        @apply w-4 h-4 fill-current;
      }
    }
  }

  &__activity {
    @apply grid md:grid-cols-8 items-start gap-4 md:gap-12 md:first:[&>*]:col-span-2 md:last:[&>*]:col-span-6;

    &__container {
      @apply divide-y divide-gray-3;
    }
  }

  &__badge {
    @apply relative;

    &-banner {
      @apply flex gap-3 bg-background rounded p-4 [&>*:last-child]:space-y-2;

      svg {
        @apply w-5 h-5 text-tertiary fill-current flex-none;
      }

      p {
        @apply text-md text-gray-2;
      }
    }

    &-grid {
      @apply grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-12 py-6 md:py-12;
    }

    &-outline {
      --color: var(--tertiary);

      @apply w-32 h-32 mx-auto grid place-items-center rounded-full overflow-hidden bg-[radial-gradient(farthest-side,#F3F4F7_90%,transparent_0_100%),conic-gradient(var(--color)_calc(var(--value)*100%),transparent_0)];
    }

    &-circle {
      @apply rounded-full overflow-hidden w-[90%] h-[90%] m-[5%_auto];
    }

    &-title {
      @apply absolute rounded text-primary bg-white top-full left-1/2 -translate-y-1/2 -translate-x-1/2 z-10 px-1.5 font-semibold;

      box-shadow: 0 4px 6px 0 rgba(211, 211, 211, 0.25);
    }

    &-name {
      @apply text-gray-2 text-center font-semibold mt-4;
    }

    &-description {
      @apply text-gray-2 text-center mt-2;
    }
  }

  &__user {
    @apply flex items-center space-x-1.5;

    &-grid {
      @apply grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-10;
    }

    &-avatar {
      @apply w-full h-full rounded-full overflow-hidden drop-shadow-md border-2 border-white transition duration-300;

      img {
        @apply w-full h-full object-cover;
      }

      &-container {
        @apply w-12 h-12 relative flex-none;
      }

      &-badge {
        @apply absolute top-full right-0 -translate-y-full grid place-items-center w-4 h-4 rounded-full overflow-hidden bg-primary border border-white;

        svg {
          @apply w-2.5 h-2.5 text-white fill-current;
        }
      }
    }

    &-name {
      @apply h5 text-secondary;
    }

    &-nick {
      @apply text-gray-2 lowercase;
    }

    &:hover &-avatar {
      @apply border-tertiary;
    }

    &:hover &-name {
      @apply underline;
    }
  }

  &__group {
    @apply pb-12 mb-14 border-b-2 border-gray-3;

    p {
      @apply mt-4 text-md text-gray-2;
    }

    &__description {
      @apply my-8 pt-8 border-t-2 border-gray-3 text-gray-2 font-semibold uppercase;
    }

    &__back {
      @apply grid place-items-center absolute top-6 md:top-12 right-0 md:-left-12 rounded-full w-6 h-6 bg-background [&>svg]:text-secondary [&>svg]:fill-current;
    }

    &__list {
      @apply my-6 md:my-10 first:mt-0 last:mb-0 flex flex-wrap md:flex-nowrap justify-between items-center gap-4 [&>*:nth-child(1)]:w-full md:[&>*:nth-child(1)]:w-auto md:[&>*:nth-child(2)]:ml-auto;
    }
  }

  &__scaffold {
    &__top {
      @apply bg-background [&>*]:mb-0;

      &-content {
        @apply flex flex-col items-center md:items-start md:flex-row justify-between py-6 md:py-12 gap-6;

        & > * {
          &:nth-child(1) {
            @apply flex-none;
          }

          &:nth-child(2) {
            @apply w-full md:w-fit grow divide-y divide-gray-3;
          }

          &:nth-child(3) {
            @apply max-w-full md:w-1/5 flex-none inline-flex flex-col gap-4;
          }
        }
      }
    }

    &__middle {
      @apply bg-background overflow-x-auto [&>*]:mb-0;

      &-content {
        @apply flex justify-between text-gray-2;
      }
    }

    &__bottom {
      /* stylelint-disable-next-line number-leading-zero */
      @apply border-t-2 border-gray-3 -mt-0.5 [&>*]:mb-0;

      &-content {
        @apply py-6 md:py-12 min-h-[200px] mb-32 relative;
      }
    }
  }
}