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

%vertical-margin{
    margin-bottom: get-vertical-margin('xs');
	@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');
	}    
}
%vertical-margin-small{
    margin-bottom: 20px;
	@include mq('md') {
		margin-bottom: 30px;
	}
	@include mq('lg') {
		margin-bottom: 40px;
	}
   
}
%vertical-margin-x-small{
    margin-bottom: 20px;
	@include mq('md') {
		margin-bottom: 25px;
	}
	@include mq('lg') {
		margin-bottom: 30px;
	}
   
}

%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: 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-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;
    @extend %animation-main;
}
%button-size-large{
    font-size: 1.6rem;
    line-height: 1.2;
    height: 60px;
    padding: 0 20px;
    border-radius: 4px;
}
%button-size-medium{
    font-size: 1.4rem;
    line-height: 1.2;
    height: 40px;
    padding: 0 20px;
    border-radius: 4px;
}
%button-size-small{
    font-size: 1.2rem;
    line-height: 1.2;
    height: 32px;
    padding: 0 15px;
    border-radius: 4px;
}
%button-style-solid{
    background: var(--color-button-bg);
    color: var(--color-bg);
}
%button-style-hollow{
    background: transparent;
    color: var(--color-button);
    border: 1px solid var(--color-button-border);
    &:hover{
        border: 1px solid var(--color-button-border-05);   
    }
}
%button-style-full-color{
    background: var(--color-acc);
    color: var(--color-bg);
    border: none;
    &:hover{
       filter: brightness(1.1); 
    }
}