.button {
    --btn-color: #2a65ff;

    color: #fff;
    background-color: var(--btn-color);

    display: flex;
    position: relative;
    width: fit-content;
    align-items: center;
    line-height: 1.4;
    text-decoration: none;
    padding: 1em 1.5em;
    border-radius: 0.5em;
}

.button:focus-visible {
    outline-offset: 0px;
    outline: solid 3px color-mix(in srgb, var(--color-focus), transparent 50%);
}

/* animation */
/* 反転 */
.hover-reverse {
    box-shadow: inset 0 0 0 1px var(--btn-color);
    transition-duration: 0.3s;
    transition-property: color, background-color;
}
@media (any-hover: hover) {
    .hover-reverse:hover {
        color: var(--btn-color);
        background: transparent;
    }
}

.hover-reverse:focus-visible {
    color: var(--btn-color);
    background: transparent;
}

/* 浮く */
.hover-up {
    transition-duration: 0.3s;
    transition-property: translate, box-shadow;

    --shadow-color: color-mix(in srgb, var(--btn-color), rgb(0 0 0 / 20%) 60%);
}

@media (any-hover: hover) {
    .hover-up:hover {
        translate: 0 -6px;

        box-shadow: 0 24px 24px -12px var(--shadow-color);
    }
}

.hover-up:focus-visible {
    translate: 0 -6px;
    box-shadow: 0 24px 24px -12px var(--shadow-color);
}


/* outline button base  */
.button--outline {
    color: var(--btn-color);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--btn-color);

    isolation: isolate;
}

/* 左から右 */
.hover-slide {
    overflow: hidden;
    transition: color 0.3s;
}
.hover-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--btn-color);

    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.3s;
}

@media (any-hover: hover) {
    .hover-slide:hover {
        color: #fff;
    }

    .hover-slide:hover::before {
        scale: 1;
    }
}

.hover-slide:focus-visible {
    color: #fff;
}
.hover-slide:focus-visible::before {
    scale: 1;
}

/* ink */
.hover-ink {
    overflow: hidden;
    transition: color 0.3s;
}

.hover-ink::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--btn-color);
    border-radius: 50%;

    scale: 0;
    opacity: 0.2;
    filter: blur(12px);
    transition-timing-function: ease-out;
    transition: scale 0.4s, filter 0.2s, opacity 0.2s;
}

@media (any-hover: hover) {
    .hover-ink:hover {
        color: #fff;
    }
    .hover-ink:hover::before {
        scale: 1.2;
        opacity: 1;
        filter: blur(0px);
    }
}

.hover-ink:focus-visible {
    color: #fff;
}
.hover-ink:focus-visible::before {
    scale: 1.2;
    opacity: 1;
    filter: blur(0px);
}

/* push */
.button--push {
    --shadow-color: color-mix(in srgb, var(--btn-color), #000 40%);

    --highlight-shadow: inset 0px 1px 4px 0px rgb(255 255 255 / 40%);

    box-shadow: 0 0.3em 0 0 var(--shadow-color), var(--highlight-shadow);

    transition-duration: 0.3s;
    transition-property: translate, box-shadow;

    margin-bottom: 0.3em;
}

@media (any-hover: hover) {
    .button--push:hover {
        translate: 0 calc(0.3em - 2px);

        box-shadow: 0 2px 0 0 var(--shadow-color), var(--highlight-shadow);
    }
}

.button--push:focus-visible {
    translate: 0 calc(0.3em - 2px);
    box-shadow: 0 2px 0 0 var(--shadow-color), var(--highlight-shadow);
}

/* gradient */
.button--grad {
    background: linear-gradient(
        60deg,
        rgb(40, 80, 255) 0%,
        rgb(160, 40, 255) 50%,
        rgb(255,80, 48) 100%
    );

    background-size: 200% 100%;
    transition: background-position 0.3s;
}

@media (any-hover: hover) {
    .button--grad:hover {
        background-position: 100% 0;
    }
}

.button--grad:focus-visible {
    background-position: 100% 0;
}

/* split */
.button--split {
    color: var(--btn-color);
    background: none;
}

.button--split::before,
.button--split::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition-property: translate, opacity;
    transition-duration: 0.3s;
}
.button--split::before {
    opacity: 0.1;
    background-color: color-mix(in srgb, var(--btn-color), #000 10%);
}

.button--split::after {
    box-shadow: inset 0 0 0 2px var(--btn-color);
}

@media (any-hover: hover) {
    .button--split:hover::before {
        opacity: 0.2;
        translate: 4px 4px;
    }
    .button--split:hover::after {
        translate: -4px -4px;
    }
}

.button--split:focus-visible::before {
    opacity: 0.2;
    translate: 4px 4px;
}
.button--split:focus-visible::after {
    translate: -4px -4px;
}
.button--split:focus-visible {
    outline: none;
}


/* shine */
.button--shine {
    position: relative;
    overflow: hidden;
}

@keyframes shine-run {
    0% {
        translate: -100% 0;
    }

    15% {
        translate: 100% 0;
    }

    100% {
        translate: 100% 0;
    }
}

@keyframes shine-hover {
    from {
        translate: -100% 0;
    }
    to {
        translate: 100% 0;
    }
}

.button--shine::after {
    content: "";
    position: absolute;
    inset: 0%;
    width: 100%;
    translate: -100% 0;
    background: linear-gradient(
        60deg,
        transparent 40%,
        rgba(255, 255, 255, 0.3) 45%,
        rgba(255, 255, 255, 0.5) 60%,
        transparent 65%
    );

    animation: 4s shine-run 3s infinite;
}

@media (any-hover: hover) {
    .button--shine:hover::after {
        animation: 0.5s shine-hover;
    }
}

.button--shine:focus-visible::after {
    animation: 0.5s shine-hover;
}

/* 3d */
.cube-button {
    position: relative;
    display: grid;
    line-height: 1.5;
    text-decoration: none;
    transition-duration: 0.4s;

    --btn-color: #2a65ff;

    --cube-width: 240px;
    --cube-height: 4rem;
    width: var(--cube-width);
    height: var(--cube-height);

    transform-style: preserve-3d;

    perspective: var(--cube-width);
}

.cube-button__text {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    transform-origin: center center calc(var(--cube-height) * -0.5);
}

.cube-button__text:first-child {
    color: var(--btn-color);
    background-color: var(--color--bg, #fff);
    border: solid 4px currentColor;
}
.cube-button__text:last-child {
    color: #fff;
    background-color: var(--btn-color);
    transform: rotateX(-90deg);
}

@media (any-hover: hover) {
    .cube-button:hover .cube-button__text {
        transform: rotateX(90deg);
    }
    .cube-button:hover .cube-button__text:last-child {
        transform: rotateX(0deg);
    }
}

.cube-button:focus-visible .cube-button__text {
        transform: rotateX(90deg);
    }
.cube-button:focus-visible .cube-button__text:last-child {
    transform: rotateX(0deg);
}