%list-restart{
	list-style: none;
}

%vertical-margin{
    margin-bottom:  20px;
	@include mq('md') {
		margin-bottom: get-vertical-margin('md');
	}
	@include mq('lg') {
		margin-bottom: get-vertical-margin('lg');
	}
	@include mq('xl') {
		margin-bottom: get-vertical-margin('xl');
	}    
}

%top-margin{
    margin-top: get-vertical-margin('md');
	@include mq('md') {
		margin-top: get-vertical-margin('lg');
	}
	@include mq('lg') {
		margin-top: get-vertical-margin('lg');
	}
	@include mq('xl') {
		margin-top: get-vertical-margin('xl');
	}    
}

%horizontal-l-margin{
    margin-left: 0;
	@include mq('md') {
		margin-left: 0;
	}
	@include mq('lg') {
		margin-left: 40px;
	}
	@include mq('xl') {
		margin-left: 50px;
	}
   
}

%vertical-margin-small{
    margin-bottom: 20px;
	@include mq('md') {
		margin-bottom: 25px;
	}
	@include mq('lg') {
		margin-bottom: 30px;
	}
   
}
%vertical-margin-x-small{
    margin-bottom: 10px;
	@include mq('md') {
		margin-bottom: 15px;
	}
	@include mq('lg') {
		margin-bottom: 20px;
	}
   
}

%top-slot-r{
    margin-right: get-header-top-elements-margin('md')/2;
    @include mq('lg') {
        margin-right: get-header-top-elements-margin('lg')/2;   
    }
    @include mq('xl') {
        margin-right: get-header-top-elements-margin('lg')/2;   
    }    
}
%top-slot-l{
    margin-right: get-header-top-elements-margin('md')/2;
    @include mq('lg') {
        margin-right: get-header-top-elements-margin('lg')/2;   
    }
    @include mq('xl') {
        margin-right: get-header-top-elements-margin('lg')/2;   
    }    
}
%top-slot-c{
    margin-right: get-header-top-elements-margin('md')/2;
    @include mq('lg') {
        margin-right: get-header-top-elements-margin('lg')/2;   
    }
    @include mq('xl') {
        margin-right: get-header-top-elements-margin('lg')/2;   
    }    
}


%main-slot-r{
	margin-right: 0;

    @include mq('lg') {
		margin-right: get-header-main-elements-margin('lg')/2;
  
    }
    @include mq('xl') {
		margin-right: get-header-main-elements-margin('lg')/2;
   
    }    
}
%main-slot-l{
    margin-right: get-header-main-elements-margin('md')/2;
    @include mq('lg') {
        margin-right: get-header-main-elements-margin('lg')/2;   
    }
    @include mq('xl') {
        margin-right: get-header-main-elements-margin('lg')/2;   
    }    
}
%main-slot-c{
    margin-right: get-header-main-elements-margin('md')/2;
    @include mq('lg') {
        margin-right: get-header-main-elements-margin('lg')/2;   
    }
    @include mq('xl') {
        margin-right: get-header-main-elements-margin('lg')/2;   
    }    
}
%animation-main{
    transition: all .2s ease-in-out;
}
%animation-color{
    transition: color .2s ease-in-out;
    will-change: color;
}

%button-main{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    white-space: nowrap;
    @extend %animation-main;
}
%button-size-large{
    font-size: 1.6rem;
    line-height: 1.2;
    height: 60px;
    padding: 0 40px;
}
%button-size-medium{
    font-size: 1.4rem;
    line-height: 1.2;
    height: 50px;
    padding: 0 30px;
}
%button-size-small{
    font-size: 1.2rem;
    line-height: 1.2;
    height: 40px;
    padding: 0 20px;
}

%button-style-primary{
    background: var(--color-button-primary);
    color: var(--color-button-primary-text);
    svg path {
        fill: var(--color-button-primary-text);
    }
}
%button-style-secondary{
    background: var(--color-button-secondary);
    color: #ffffff;
    &:hover{
        filter: brightness(1.1); 
    }
}
%button-style-tertiary{
    background: var(--color-button-tertiary);
    color: var( --color-txt );
    &:hover{
        filter: brightness(90%) saturate(4) hue-rotate(-20deg);
    }
}