$color-primary: #005299;
$color-light: #4e7eca;
$color-dark: #002b6a;
$color-secondary:#ff7043;
$color-secondary-dark:#c63f17;
$color-secondary-light:#ffa270;
$color-background:#f5f5f5;

$color-text-primary:#ffffff;
$color-text-secondary:#ffffff;

@use "@material/theme" with (
  $primary: $color-primary,
  $secondary: $color-secondary,
  $background: $color-light,
);
@use "material-components-web";

@use "@material/card";
@use "@material/button";
@use "@material/tab";
@import "@material/top-app-bar/mdc-top-app-bar";
@import '@material/button';


@mixin eightspacing{
	margin: 8px 8px 8px 8px;
}

@mixin eightpadding {
	padding: 8px 8px 8px 8px;

}


.mdc-top-app-bar--fixed{
	@include mdc-top-app-bar-fill-color($color-dark);
	@include mdc-top-app-bar-ink-color($color-text-primary);
	@include eightspacing;
	@include eightpadding;
}

.mdc-card{
	@include eightspacing;
	@include eightpadding;
	p {
		font-family: 'Roboto', sans-serif;
		font-size: 24px;
	}
}

.mdc-button{
	@include eightspacing;
	@include eightpadding;
	@include button.core-styles;
	@include button.filled-accessible($color-primary);

}

@keyframes loading{
	
	0% {
		transform: translateX(-150%) scale(1);
	}
	
	25% {
		transform: translateX(0%) scale(0.5);
	}
	
	50% {
		transform: translateX(150%) scale(1);
	}
	
	75% {
		transform: translateX(0%) scale(0.5);
	}
	
	100% {
		transform: translateX(-150%) scale(1);
	}
}

.animation-container{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.animation{
		width:3rem;
		height: 3rem;
		position: relative;
		
		.cycle-1, .cycle-2{
			top: 0;
			left: 0;
			position: absolute;
			background-color:$color-secondary;
			border-radius: 50%;
			width: 3rem;
			height: 3rem;
			
		}
		
		.cycle-1{
			animation: loading 4s 0.5s infinite;
		}
		
		.cycle-2{
			animation: loading 4s infinite;
		}
		
		p {
			text-align:center;
			text-transform:uppercase;
			letter-spacing: 0.4rem;
			font-size: 0.8rem;
		}
	}
}

.tab{
	@include eightspacing;
	@include eightpadding;
	display:flex;
}

.mdc-tab{
	@include tab.active-text-label-color($color-secondary);
	@include tab.states-color($color-primary);
	@include tab.active-states-color($color-secondary);
	@include tab.active-icon-color($color-secondary);
}


html{
	width: 400px;
	height: 600px;
	display:flex;
}

body{
    background-color:$color-primary;
}