@layer components {
/* Default */
.textbtn {
    font-size: var(--font-size-16);
    color: var(--semantic-text-link);
    text-decoration: underline;
    background: inherit;
    font-weight: var(--font-weight-regular);
    opacity: 1;
    cursor: pointer;
}

/* Hover */
.textbtn-hover,
.textbtn:hover {
    text-decoration: none;
}
.textbtn-left.textbtn-hover,
.textbtn-left.textbtn:hover,
.textbtn-right.textbtn-hover,
.textbtn-right.textbtn:hover {
    opacity: 0.7;
}

/* Left */
.textbtn-left {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.textbtn-left::before{
    content: "";
    mask: url(/stcontents/img/lp-components/icon/arrow-left.svg) no-repeat center center / contain;
    -webkit-mask: url(/stcontents/img/lp-components/icon/arrow-left.svg) no-repeat center center / contain;
    display: inline-block;
    background: var(--semantic-text-link);
    width: 24px;
    height: 24px;
}

/* Right */
.textbtn-right {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.textbtn-right::after {
    content: "";
    mask: url(/stcontents/img/lp-components/icon/arrow-right.svg) no-repeat center center / contain;
    -webkit-mask: url(/stcontents/img/lp-components/icon/arrow-right.svg) no-repeat center center / contain;
    display: inline-block;
    background: var(--semantic-text-link);
    width: 24px;
    height: 24px;
}

/* Copy */
.textbtn-copy {
    color: var(--semantic-secondary-text);
    background-color: var(--semantic-relux-brand-background);
    text-decoration: underline;
    display: flex;
    justify-content: center;
    align-items: center;
}
.textbtn-copy::after {
    content: "";
    background: url(/stcontents/img/lp-components/icon/copy.svg) no-repeat center center / contain;
    display: inline-block;
    width: 24px;
    height: 24px;
}
}