.requests {
	padding: var(--space-l-2xl) 0;

	& > header {
		& > p {
			color: var(--color-neutral-4);
			margin-top: var(--space-3xs);
			max-width: 40rem;
		}
	}

	& > .list {
		list-style: none;
		margin-top: var(--space-l);
		display: flex;
		flex-direction: column;
		gap: var(--space-s);

		& > li {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			gap: var(--space-s);
			padding: var(--space-s);
			border: 1px solid var(--color-neutral-8);
			border-radius: var(--border-radius);

			& > .who > p {
				color: var(--color-neutral-4);
				font-size: var(--font-size--1);
				margin-top: var(--space-3xs);
			}

			& > .actions {
				display: flex;
				gap: var(--space-xs);
			}

			& > .badge {
				padding: var(--space-3xs) var(--space-xs);
				border-radius: 1em;
				font-size: var(--font-size--1);
				background: var(--color-neutral-9);
				color: var(--color-neutral-2);

				&.granted {
					background: var(--color-color-8);
					color: var(--color-color-0);
				}

				&.denied {
					background: var(--color-color-11);
					color: var(--color-color-3);
				}
			}
		}
	}

	& > .empty {
		margin-top: var(--space-l);

		& > p {
			color: var(--color-neutral-4);
		}
	}
}