@import './base.css';

/* Grund-CSS för alla cards */
.pokemon-card{
	display:flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	margin: 2rem auto;
	padding: 0 2rem 1rem 2rem;
	border-radius: 0.3rem;
	background-color: rgb(198, 249, 198);
	box-shadow: 0.08rem 0.08rem 0.08rem 0.08rem hsl(0, 0%, 67%);
}

.pokemon-card-name{
	border-style: ridge;
	border-color: var(--darkyellow);
	width:6rem;
	padding: 0 0.5rem;
}

.pokemon-card-abilities{
	font-size: 0.8rem;
	width:6rem;
	padding:  0.5rem;
	height: 5rem;
	text-align: left;
	list-style: none;
	border-style: ridge;
	border-color: var(--darkyellow);
}

.pokemon-card-add-button{
	padding: 0 1rem;
	border-radius: 2em;
	border: none;
	padding: 0.2em 0;
	margin-top: 1rem;
	width:5em;
	background-color: var(--green);
	box-shadow: 0.2rem 0.2rem 0.2rem hsl(44, 0%, 45%);
}

.pokemon-card-add-button:hover, .pokemon-card-add-button:focus{
	background-color: var(--lightgreen);
}

.pokemon-card-add-button:active{
	box-shadow: 0.1rem 0.1rem 0.2rem hsl(44, 0%, 45%);
}

/* CSS för cards i myTeam */

.pokemon-nickname{
	height:1rem;
	margin:0.5rem ;
}

.name-your-pokemon-input{
	margin-top: 0.8rem;
	padding: 0.2rem 0;
	width:8.5em;
	border-style:groove;
	border-radius: 0.3rem;
	border-color: var(--ligthgrey);
	font-family: Arial, Helvetica, sans-serif;
}

.name-your-pokemon-button{
	margin-top: 0.5rem;
	border-radius: 2em;
	border: none;
	padding: 0.1em 0;
	width: 4rem;
	background-color: var(--darkyellow);
	box-shadow: 0.2rem 0.2rem 0.2rem hsl(44, 0%, 45%);
}

.name-your-pokemon-button:hover, .name-your-pokemon-button:focus{
	background-color: var(--lightyellow);
}

.name-your-pokemon-button:active{
box-shadow: 0.1rem 0.1rem 0.2rem hsl(44, 0%, 45%);
}

.remove-from-team-button{
	border-radius: 2em;
	border: none;
	padding: 0.2em 0;
	margin-top: 1rem;
	width:5em;
	background-color: var(--orange);
	box-shadow: 0.2rem 0.2rem 0.2rem hsl(44, 0%, 45%);
}

.remove-from-team-button:hover, .remove-from-team-button.focus{
	background-color: var(--lightorange);
}

.remove-from-team-button:active{
box-shadow: 0.1rem 0.1rem 0.2rem hsl(44, 0%, 45%);
}

.before-button{
	margin-top: 0.5rem;
	margin-right: 2rem;
	padding: 0 0.5em;

}

.next-button{
	margin-top: 0.5rem;
	margin-left: 2rem;
	padding: 0 0.5em;
}