//button.index.tsx
.button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    border-radius: 5px;
    border: 0.1px solid rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);

    &:active {
        opacity: 0.5;

        &.disabled {
            opacity: 1;
        }
    }

    &.ghost {
        background-color: #FFFFFF !important;
    }

    &.primary {
        background-color: #1677ff;
        border: 0.1px solid #1677ff;

        .button-text {
            color: #FFFFFF;
        }

        &.ghost {
            .button-text {
                color: #1677ff;
            }
        }
    }

    &.danger {
        background-color: #ff4d4f;
        border: 0.1px solid #ff4d4f;

        .button-text {
            color: #FFFFFF;
        }

        &.ghost {
            .button-text {
                color: #ff4d4f;
            }
        }
    }

    .button-text {
        font-size: 6.5px;
        font-weight: 400;
        color: #111111;
    }

    &.disabled {
        opacity: 0.7;
        background-color: #F1F1F1 !important;
        border: 0.1px solid rgba(0, 0, 0, 0.3);

        .button-text {
            color: rgba(0, 0, 0, 0.25) !important;
        }
    }

    &.loading {
        opacity: 0.7;
    }

    .acticon-spin {
        width: 8px;
        height: 8px;
        margin-left: 5px;
        fill: #FFFFFF !important;
        animation: acticon-spin 1s linear infinite;
    }

    @keyframes acticon-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}