@import 'scss/styles.scss';

@keyframes selectFix {
    from {
        user-select: none;
    }

    to {
        user-select: auto !important;
    }
}

.ca-custom-card {
    transition: background 0.1s ease-in-out;

    // Card header
    .ca-card-header {
        margin: 4px 0px;
        cursor: pointer;
        user-select: none;
        max-width: 616px;

        .header-content {
            .header-text {
                transition: color 0.3s ease-in-out;
            }

            .header-counter {
                transition: background-color 0.3s ease-in-out;
            }
        }

        // Card right side actions
        .header-actions {
            // Arrow
            .header-arrow {
                width: 18px;
                height: 18px;
                line-height: 18px;

                opacity: 1;
                visibility: visible;
                transition:
                    opacity 0.3s ease-in-out,
                    visibility 0.3s ease-in-out;

                &-hide {
                    opacity: 0;
                    visibility: hidden;
                }

                svg {
                    transform: rotate(0deg);
                    transition: all 0.3s ease-in-out;

                    path {
                        fill: $muted;
                        transition: all 0.3s ease-in-out;
                    }
                }

                &.rotate {
                    svg {
                        transform: rotate(180deg);
                        transition: all 0.3s ease-in-out;
                    }
                }
            }
        }

        &:hover {
            transition: all 0.3s ease-in-out;

            .header-text {
                color: $ta-black !important;
            }

            .header-arrow {
                svg {
                    path {
                        transition: all 0.3s ease-in-out;
                        fill: $ta-black;
                    }
                }
            }

            .header-counter {
                background-color: $bw6-2 !important;
            }
        }

        &.no-data {
            cursor: auto !important;

            &:hover {
                .header-arrow {
                    svg {
                        path {
                            fill: $ta-light-grey-2;
                        }
                    }
                }
            }
        }

        &.disabled {
            cursor: default;

            .header-text {
                color: $ta-light-grey-2 !important;
            }

            .header-counter {
                display: none !important;
            }

            .header-arrow {
                display: none;
            }
        }
        &.always-open {
            cursor: default;
            .header-text {
                color: $ta-black !important;
            }
        }
    }

    // Card body
    .ca-card-body {
        max-height: auto;
        position: relative;

        .content-holder {
            margin-top: var(--animation-margin-top, 12px);
            margin-bottom: var(--animation-margin-bottom, 12px);
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition:
                height 0.3s ease-in-out,
                opacity 0.15s ease-in-out;
            will-change: height, opacity;

            &.inactive {
                opacity: 0;
                overflow: hidden;
            }

            &.active {
                opacity: 1;
                overflow: visible;
                height: 100%;
            }

            &.openedCardClass {
                animation: selectFix 1.5s ease;
            }
        }

        &.scroll {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            scrollbar-width: thin !important;
            /* Firefox */

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: $bw-9;
                border-radius: 3px;
                border: 1px solid $ta-light-grey-5;
            }

            &::-webkit-scrollbar-track {
                background: $ta-light-grey-5;
                border-radius: 3px;
            }
        }
    }
}

.cursor-default {
    cursor: default;
}