:root{
	--stickerUIColor:rgba(134,134,134,0.4);
	/*--stickerUIColor:var(--modeColor);*/
}

.btn-sticker-auto{
	
	/*rgba(78, 78, 78, 0.4)*/
	
	--pellRight:50px;
	--pellLeft:60px;

  /*clip-path: polygon(*/
  /*  0 0,*/
  /*  calc(100% - 1.1875rem) 0,*/
  /*  calc(100% - 1.1875rem) 0,*/
  /*  calc(100% + 0.1837068893rem) 100%,*/
  /*  calc(100% + 0.1837068893rem) 100%,*/
  /*  0 100%*/
  /*)	*/
	
	clip-path: polygon(
	0 0,
	calc(100% - var(--pellRight)) 0,
	/*calc(100% - 50px) 0,*/
	100% var(--pellLeft),
	calc(100% + 60px) 100%,
	calc(100% + 60px) 100%,
	0 100%
	);
	border-radius:26px;
	transition: clip-path var(--pellAnimSpeed) ease-out;
	overflow:hidden;
	color:var(--primary-text) !important;
	border-color:var(--stickerUIColor) !important;
}
.btn-sticker-auto:hover{
  clip-path: polygon(
    0 0,
    100% 0,
    100% 0,
    100% 100%,
    100% 100%,
    0 100%
  ) !important;	
}
.btn-sticker-auto::after {
	content: "";
	position: absolute;
	display: block;
	/*border-radius: 50rem;*/
	background-color: var(--stickerUIColor);
	border: 1px solid var(--stickerUIColor);
	transition: transform var(--pellAnimSpeed) ease-out;
	height: 90px;
	width: 90px;
	top: 5px;
	right: -1px;
	transform: rotate(-45deg) translateX(45px);
	box-shadow:0px 5px 15px -2px rgba(0, 0, 0, var(--shadow-texture-opacity));
	
}
.btn-sticker-auto:hover::after{
    transform: rotate(-45deg) translateX(120%) !important;  
}

/*****INVERT***** /

.btn-sticker-auto-invert {
	clip-path: polygon(
		0 0,
		100% 0,
		100% 0,
		100% 100%,
		100% 100%,
		0 100%
	);
	border-radius: 26px;
	transition: clip-path var(--pellAnimSpeed) ease-out;
	overflow: hidden;
	color: var(--primary-text) !important;
	border-color: var(--stickerUIColor) !important;
}
.btn-sticker-auto-invert:hover {
	clip-path: polygon(
		0 0,
		calc(100% - var(--pellRight)) 0,
		100% var(--pellLeft),
		calc(100% + 60px) 100%,
		0 100%
	) !important;
}
.btn-sticker-auto-invert::after {
	content: "";
	position: absolute;
	display: block;
	background-color: var(--stickerUIColor);
	border: 1px solid var(--stickerUIColor);
	transition: transform var(--pellAnimSpeed) ease-out;
	height: 90px;
	width: 90px;
	top: 5px;
	right: -1px;
	transform: rotate(-45deg) translateX(120%);
	box-shadow: 0px 5px 15px -2px rgba(0, 0, 0, var(--shadow-texture-opacity));
}
.btn-sticker-auto-invert:hover::after {
	transform: rotate(-45deg) translateX(45px) !important;
}

/*****INVERT-2*****/
.btn-sticker-auto-invert {
	
		--pellRight:50px;
	--pellLeft:60px;
	
	--pellAnimSpeed:0.3s;

	clip-path: polygon(
		0 0,
		100% 0,
		100% 0,
		100% 100%,
		100% 100%,
		0 100%
	) !important;
	border-radius: 26px;
	transition: clip-path var(--pellAnimSpeed,0.7s) ease-out;
	overflow: hidden;
	color: var(--primary-text) !important;
	border-color: var(--stickerUIColor) !important;
	position: relative; /* Szükséges a ::after pozicionálásához */
}
.btn-sticker-auto-invert:hover {
	clip-path: polygon(
		0 0,
		calc(100% - var(--pellRight)) 0,
		100% var(--pellLeft),
		calc(100% + 60px) 100%,
		0 100%
	) !important;
}
.btn-sticker-auto-invert::after {
	content: "";
	position: absolute;
	display: block;
	background-color: var(--stickerUIColor);
	border: 1px solid var(--stickerUIColor);
	transition: transform var(--pellAnimSpeed) ease-out, opacity 0.3s ease-out, scale 0.3s ease-out !important;
	height: 90px;
	width: 90px;
	top: 5px;
	right: -1px;
	transform: rotate(-45deg) translateX(120%) scale(0.5); /* Kezdő állapotban kisebb és elmozdul */
	/*opacity: 0;*/
	box-shadow: 0px 5px 15px -2px rgba(0, 0, 0, var(--shadow-texture-opacity));
}
.btn-sticker-auto-invert:hover::after {
	transform: rotate(-45deg) translateX(45px) scale(1) !important; /* Teljes méretre nő */
	/*opacity: 1;*/
}


/*.btn-sticker-auto {*/
/*  clip-path: polygon(*/
/*    0 0,*/
/*    calc(100% - 0.1875rem) 0,*/
/*    calc(100% - 3.0875rem) 0,*/
/*    calc(100% + 6.983707rem) 100%,*/
/*    calc(100% + 0.183707rem) 100%,*/
/*    0 100%*/
/*  );*/
/*}*/

/*.btn-sticker-auto::after{*/
/*  height: 2.375rem;*/
/*  width: 2.375rem;*/
/*  top: -1px;*/
/*  right: -1px;*/
/*  transform: rotate(-30deg) translateX(4.1875rem);*/
/*}*/

/*.btn-sticker-auto:hover::after{*/
/*  transform: rotate(-30deg) translateX(3rem);*/
/*}*/

.btn-sticker-fixed {
    /*width: 300px;*/
    /*height: 200px;*/
    /*background-color: #42A5F5;*/
    background-color: transparent;
     background-color: #3498db; /* Háttérszín */
    color: #1976D2;
    font-size: 30px;
    /*margin: 50px auto;*/
    /*text-align:left;*/
    text-align: center;
    /*line-height: 200px;*/
    position: relative;
    overflow: hidden;
    border-radius:8px;
	  
}
.btn-sticker-fixed:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-color: rgba(255,255,255,.5) rgba(255,255,255,0);
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -webkit-box-shadow: 0 0 5px #555;
    -moz-box-shadow: 0 0 5px #555;
    box-shadow: 0 0 5px #555;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    /*border-width: 0 80px 80px 0;*/
    border-width: 0 25px 25px 0;
}
.btn-sticker-fixed:hover:before { 
	border-width: 0 80px 80px 0 
    /*border-width: 0 0px 0px 0;*/
	
}