@use '~flux/components/css/mixin';

.primaryButton {
    composes: button from './base/Button.module.scss';

    background: var(--primary-600);
    border-color: var(--primary-700);
    box-shadow: 0 1px 1px rgb(from var(--primary-600) r g b / .25);
    color: var(--primary-25);

    @include mixin.hover {
        background: var(--primary-700);
        border-color: var(--primary-800);
    }

    @include mixin.button-active(var(--primary-800));

    .spinner {
        --track: var(--primary-700);
        --value: var(--primary-25);
    }
}

.primaryButtonIcon {
    composes: buttonIcon from './base/Button.module.scss';

    color: var(--primary-25);
}

.primaryButtonLabel {
    composes: buttonLabel from './base/Button.module.scss';
}

.secondaryButton {
    composes: button from './base/Button.module.scss';

    background: var(--surface);
    border-color: var(--surface-stroke);
    color: var(--foreground);

    @include mixin.hover {
        background: var(--surface-hover);
    }

    @include mixin.button-active(var(--surface-active));
}

.secondaryButtonIcon {
    composes: buttonIcon from './base/Button.module.scss';

    color: var(--foreground);
}

.secondaryButtonLabel {
    composes: buttonLabel from './base/Button.module.scss';
}

.destructiveButton {
    composes: button from './base/Button.module.scss';

    background: var(--surface);
    border-color: var(--surface-stroke);
    color: var(--foreground);

    @include mixin.hover {
        background: var(--surface-hover);
    }

    @include mixin.button-active(var(--surface-active));

    .spinner {
        --value: var(--danger-600);
    }
}

.destructiveButtonIcon {
    composes: buttonIcon from './base/Button.module.scss';

    color: var(--danger-600);
}

.destructiveButtonLabel {
    composes: buttonLabel from './base/Button.module.scss';

    &:only-child {
        color: var(--danger-600);
    }
}

.secondaryButton,
.destructiveButton {
    box-shadow: var(--shadow-px), inset 0 -1px rgb(from var(--gray-200) r g b / .15);
}

.baseLinkButton {
    composes: button from './base/Button.module.scss';

    gap: 6px;
    border-color: transparent;
    box-shadow: none;

    @include mixin.hover {
        background: var(--surface-hover);
    }

    @include mixin.button-active(var(--surface-active));
}

.primaryLinkButton {
    composes: baseLinkButton;

    color: var(--primary-700);
}

.primaryLinkButtonIcon {
    composes: buttonIcon from './base/Button.module.scss';

    color: var(--primary-700);
}

.primaryLinkButtonLabel {
    composes: buttonLabel from './base/Button.module.scss';
}

.secondaryLinkButton {
    composes: baseLinkButton;

    color: var(--foreground-prominent);
}

.secondaryLinkButtonIcon {
    composes: buttonIcon from './base/Button.module.scss';

    color: var(--foreground);
}

.secondaryLinkButtonLabel {
    composes: buttonLabel from './base/Button.module.scss';
}

.publishButton {
    composes: primaryButton;

    position: relative;
    overflow: hidden;
}

.publishButtonIcon {
    composes: primaryButtonIcon;
}

.publishButtonLabel {
    composes: primaryButtonLabel;
}

.publishButtonAnimation {
    position: relative;
    display: block;
    height: 20px;
    width: 20px;
    align-items: center;
    justify-content: center;
    overflow: visible;

    :is(path) {
        fill: currentColor;
        transition: 270ms var(--swift-out);
    }
}

.publishButton.isDone {
    .publishButtonAnimationArrow {
        animation: publishArrowOut .4s var(--acceleration-curve) both;
    }

    .publishButtonAnimationCheck,
    .publishButtonAnimationCircle {
        transition-delay: .5s;
    }
}

.publishButton.isIdle .publishButtonAnimationCheck {
    opacity: 0;
}

.publishButton.isLoading {
    .publishButtonAnimationArrow {
        animation: publishArrowIn 1s var(--deceleration-curve) both;
    }

    .publishButtonAnimationCheck,
    .publishButtonAnimationCircle {
        opacity: 0;
    }
}

.publishButtonCloud {
    position: absolute;
    top: 50%;
    opacity: 0;
    animation: publish .6s linear infinite;
    transition: 360ms var(--swift-out) 210ms;

    &:nth-child(2) {
        left: -12px;
        animation-delay: -.3s;
    }

    &:nth-child(3) {
        right: -12px;
    }
}

.publishButton.isLoading .publishButtonCloud {
    opacity: .5;
}

.buttonGroup {
    display: inline-flex;
    width: max-content;
    flex-grow: 0;
    flex-shrink: 0;
    z-index: 0;

    :local(.button) {
        border-radius: 0;

        &:first-child {
            border-top-left-radius: var(--radius);
            border-bottom-left-radius: var(--radius);
        }

        &:last-child {
            border-top-right-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
        }
    }

    :local(.primaryButton) {
        z-index: 1;
    }

    :local(.button) + :local(.button) {
        margin-left: -1px;
    }
}

@keyframes publish {
    from {
        translate: 0 calc(-30px - 50%);
    }

    to {
        translate: 0 calc(30px - 50%);
    }
}

@keyframes publishArrowIn {
    25% {
        translate: 0 128px;
    }

    100% {
        translate: 0 0;
    }
}

@keyframes publishArrowOut {
    to {
        opacity: 0;
        translate: 0 -512px;
    }
}