:root{--border-w:2px;--radius:.6rem;--transition:all .4s cubic-bezier(.25,1,.5,1)}.split-wrapper{cursor:pointer;display:inline-flex;position:relative;--btn-color:rgb(var(--color-primary-500));--btn-bg:transparent;--btn-border:rgb(var(--color-primary-500));--btn-hover-bg:transparent}.split-wrapper--solid{--btn-color:#fff;--btn-bg:rgb(var(--color-primary-500));--btn-border:rgb(var(--color-primary-500));--btn-hover-bg:rgb(var(--color-primary-600))}.split-wrapper--outline{--btn-color:rgb(var(--color-primary-500));--btn-bg:transparent;--btn-border:rgb(var(--color-primary-500));--btn-hover-bg:transparent}.btn-left{position:relative;width:100%}.btn-content,.btn-left{display:flex;transition:all .4s cubic-bezier(.25,1,.5,1);transition:var(--transition)}.btn-content{align-items:center;background-color:var(--btn-bg);border:var(--border-w) solid var(--btn-border);border-radius:.6rem 0 0 .6rem;border-radius:var(--radius) 0 0 var(--radius);border-right:none;color:var(--btn-color);font-weight:600;height:50px;justify-content:center;padding:.73em 0 .73em 35px;width:calc(100% - 35px);z-index:2}.btn-content-text,.slant-edge{transition:all .4s cubic-bezier(.25,1,.5,1);transition:var(--transition)}.slant-edge{background-color:var(--btn-bg);border:var(--border-w) solid var(--btn-border);border-left:none;border-radius:0 .6rem .6rem 0;border-radius:0 var(--radius) var(--radius) 0;transform:translate(-1px);width:35px;z-index:1}.btn-right{color:var(--btn-color);display:flex;height:100%;opacity:0;position:absolute;right:0}.btn-right,.slant-edge-left{transition:all .4s cubic-bezier(.25,1,.5,1);transition:var(--transition)}.slant-edge-left{border:var(--border-w) solid var(--btn-border);border-radius:6px 0 0 14px;border-right:none;transform:skew(0) translate(12px);width:20px}.slant-edge-left,.slant-edge-right{background-color:var(--btn-hover-bg)}.slant-edge-right{align-items:center;border:var(--border-w) solid var(--btn-border);border-left:none;border-radius:0 .6rem .6rem 0;border-radius:0 var(--radius) var(--radius) 0;display:flex;font-size:1.2rem;width:22px}.btn-line{background-color:var(--btn-color);height:2px;height:var(--border-w)}.btn-fill,.btn-line{bottom:0;left:50%;position:absolute;transform:translate(-60%);width:50%}.btn-fill{border-bottom:var(--border-w) solid var(--btn-border);height:50%;transition:all .4s cubic-bezier(.25,1,.5,1);transition:var(--transition)}.split-wrapper--solid .btn-fill{background-color:#021c2b;border-bottom-color:#021c2b}.split-wrapper--solid .slant-edge-left,.split-wrapper--solid .slant-edge-right{background-color:#021c2b;border-color:#021c2b}.split-wrapper--outline .btn-fill{background-color:transparent}.btn-icon{align-items:center;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;position:absolute}@media (min-width:768px){.split-wrapper:hover .btn-content{background-color:var(--btn-hover-bg);padding:.73em 0 .73em 5px;width:calc(100% - 66px)}.split-wrapper:hover .btn-content-text{transform:translate(6.5%)}.split-wrapper:hover .btn-right{opacity:1}.split-wrapper:hover .slant-edge{background-color:var(--btn-hover-bg);border-radius:0 14px 6px 0;transform:skew(-26deg) translate(-17px)}.split-wrapper:hover .slant-edge-left{transform:skew(-26deg)}.split-wrapper:hover .btn-fill{transform:translate(-66%)}}
