.badge {
     position: relative;
     white-space: nowrap;
     position: relative;
}
 .badge[data-badge]::after {
     position: absolute;
     left: 100%;
     z-index: 99;
     margin: 0;
     background: #a08cdb;
     background-clip: padding-box;
     border-radius: 1rem;
     box-shadow: 0 0 0 0.1rem #F28248;
     color: #F28248;
     content: attr(data-badge);
     display: inline-block;
}
 .badge[data-badge]::after.is-badge-outlined {
     background: #F28248;
     border: 1px solid #a08cdb;
     color: #a08cdb;
}
 .badge:not([data-badge=""])::after {
     padding: 0.3rem 0.5rem;
     text-align: center;
     white-space: nowrap;
}
 .badge[data-badge=""]::after {
     display: inline-block;
     vertical-align: inherit;
}
 .badge.is-badge-outlined[data-badge]::after {
     background-color: #F28248;
     box-shadow: none;
     border: 0.1rem solid #a08cdb;
     color: #a08cdb;
}
 .badge.is-badge-outlined.badge-primary::after {
     background: #fff;
     border: 0.1rem solid #a08cdb;
     color: #a08cdb;
}
 .badge.is-badge-outlined.badge-secondary::after {
     background: #fff;
     border: 0.1rem solid #4D527F;
     color: #4D527F;
}
 .badge.is-badge-outlined.badge-accent::after {
     background: #fff;
     border: 0.1rem solid #a08cdb;
     color: #a08cdb;
}
 .badge[data-badge]::after {
     top: calc(0px - ( 1.2rem / 2 ));
     left: calc(100% - ( 1.2rem / 2 ));
     min-height: 1.2rem;
     min-width: 1.2rem;
}
 .badge:not([data-badge=""])::after {
     font-size: 0.9rem;
     line-height: 0.6rem;
}
 .badge[data-badge=""]::after {
     width: 1.2rem;
}
 .badge.is-badge-left::after {
     left: calc(0px - ( 1.2rem / 2 ));
}
 .badge.is-badge-bottom::after {
     top: calc(100% - ( 1.2rem / 2 ));
}
 .badge.is-badge-bottom-left::after {
     left: calc(0px - ( 1.2rem / 2 ));
     top: calc(100% - ( 1.2rem / 2 ));
}
 .badge.is-badge-small[data-badge]::after {
     top: calc(0px - ( 0.9rem / 2 ));
     left: calc(100% - ( 1.9rem / 2 ));
     min-height: 0.9rem;
     min-width: 0.9rem;
}
 .badge.is-badge-small:not([data-badge=""])::after {
     font-size: 0.675rem;
     line-height: 0.45rem;
}
 .badge.is-badge-small[data-badge=""]::after {
     width: 0.9rem;
}
 .badge.is-badge-small.is-badge-left::after {
     left: calc(0px - ( 0.9rem / 2 ));
}
 .badge.is-badge-small.is-badge-bottom::after {
     top: calc(100% - ( 0.9rem / 2 ));
}
 .badge.is-badge-small.is-badge-bottom-left::after {
     left: calc(0px - ( 0.9rem / 2 ));
     top: calc(100% - ( 0.9rem / 2 ));
}
 .badge.is-badge-medium[data-badge]::after {
     top: calc(0px - ( 1.6rem / 2 ));
     left: calc(100% - ( 1.6rem / 2 ));
     min-height: 1.6rem;
     min-width: 1.6rem;
}
 .badge.is-badge-medium:not([data-badge=""])::after {
     font-size: 1.2rem;
     line-height: 0.8rem;
}
 .badge.is-badge-medium[data-badge=""]::after {
     width: 1.6rem;
}
 .badge.is-badge-medium.is-badge-left::after {
     left: calc(0px - ( 1.6rem / 2 ));
}
 .badge.is-badge-medium.is-badge-bottom::after {
     top: calc(100% - ( 1.6rem / 2 ));
}
 .badge.is-badge-medium.is-badge-bottom-left::after {
     left: calc(0px - ( 1.6rem / 2 ));
     top: calc(100% - ( 1.6rem / 2 ));
}
 .badge.is-badge-large[data-badge]::after {
     top: calc(0px - ( 2rem / 2 ));
     left: calc(100% - ( 2rem / 2 ));
     min-height: 2rem;
     min-width: 2rem;
}
 .badge.is-badge-large:not([data-badge=""])::after {
     font-size: 1.5rem;
     line-height: 1rem;
}
 .badge.is-badge-large[data-badge=""]::after {
     width: 2rem;
}
 .badge.is-badge-large.is-badge-left::after {
     left: calc(0px - ( 2rem / 2 ));
}
 .badge.is-badge-large.is-badge-bottom::after {
     top: calc(100% - ( 2rem / 2 ));
}
 .badge.is-badge-large.is-badge-bottom-left::after {
     left: calc(0px - ( 2rem / 2 ));
     top: calc(100% - ( 2rem / 2 ));
}
 .badge.badge-primary::after {
     background: #F2A65A;
}
 .badge.badge-secondary::after {
     background: #4D527F;
}
 .badge.badge-accent::after {
     background: #a08cdb;
}