src/routes/Main/ApisList/ApisCards/index.module.scss

@import "/src/styles/index";

.container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.apiCard {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.24), 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.28);
	cursor: pointer;

	.content {
		height: 100%;
		padding-bottom: 1rem;

		h4 {
			margin: 0 0 0.75rem;
			font-size: 1.25rem;
			font-weight: 600;
		}

		.tags {
			display: flex;
			gap: 0.75rem;
			margin-bottom: 0.75rem;

			span {
				color: $gray;
				font-size: 0.75rem;
				font-style: normal;
				font-weight: 700;
				line-height: 1rem;
				text-transform: uppercase;

				&:not(:last-of-type) {
					padding-right: 0.75rem;
					border-right: 1px solid $gray;
				}
			}
		}

		.description {
			font-size: 0.875rem;
			font-weight: 400;
			line-height: 1.25rem;
			/* 142.857% */
		}
	}

	.menuButton {
		align-self: flex-end;
	}
}

.copiedTooltip {
	display: flex;
	align-items: center;

	svg {
		padding-right: .25rem;

		path {
			fill: #107C10;
		}
	}
}