.swatches-container {
    .header {
        display: flex;
        flex-direction: row;
        font-weight: 700;
        background-color: var(--bb-body-bg);
        color: var(--bb-body-color);
        border-bottom: var(--bb-border-width) var(--bb-border-style) var(--bb-border-color);

        > * {
            float: left;
            padding: 10px;
            text-align: center;
        }
    }

    .swatches-list {
        float: left;
        list-style: none;
        margin: 0 0 15px;
        padding: 0;
        width: 100%;
        position: relative;

        li.currency-item {
            position: relative;
            margin-bottom: 1px;

            &:nth-child(odd) {
                .currency-row {
                    background-color: var(--bb-body-bg);
                }
            }

            .currency-row {
                display: flex;
                flex-direction: row;
                align-items: center;

                > * {
                    float: left;
                    padding: 10px;
                    text-align: center;
                }
            }

            .currency-advanced-settings {
                background-color: var(--bb-tertiary-bg);
                border-left: 3px solid var(--bb-primary);
                padding: 15px 20px;
                margin: 0;

                .advanced-settings-content {
                    .form-label {
                        font-size: 13px;
                        font-weight: 600;
                        margin-bottom: 5px;
                    }

                    .form-control,
                    .form-select {
                        font-size: 14px;
                    }
                }
            }

            .image-box-container {
                width: 34px;
                margin: 0 auto;
                font-size: 0;

                img {
                    border: 1px solid #cccccc;
                    width: 34px;
                    height: 34px;
                }
            }
        }

        #loading-update-currencies {
            .currency-loading-backdrop {
                position: absolute;
                background-color: gray;
                opacity: 0.3;
                z-index: 9998;
                width: 100%;
                height: 100%;
            }

            .currency-loading-loader {
                position: absolute;
                border: 5px solid #f3f3f3;
                border-top: 5px solid #3498db;
                border-radius: 50%;
                right: 50%;
                top: 40%;
                z-index: 9999;
                width: 30px;
                height: 30px;
                animation: spin 2s linear infinite;
            }
        }
    }

    .header,
    .currency-row {
        width: 100%;
    }

    .swatch-item {
        flex: 0 0 auto;

        &:first-child {
            // Code column
            width: 12%;
            min-width: 100px;
        }

        &:nth-child(2) {
            // Symbol column
            width: 10%;
            min-width: 80px;
        }
    }

    .swatch-exchange-rate {
        flex: 1 1 auto;
        min-width: 150px;
    }

    .swatch-is-default {
        flex: 0 0 auto;
        width: 12%;
        min-width: 100px;
    }

    .swatch-advanced {
        flex: 0 0 auto;
        width: 10%;
        min-width: 90px;

        .toggle-advanced {
            padding: 5px 12px;
            transition: all 0.3s ease;

            svg {
                margin: 0;
            }

            &:hover {
                background-color: var(--bb-primary);
                border-color: var(--bb-primary);
                color: white;
            }

            &.active {
                background-color: var(--bb-primary);
                border-color: var(--bb-primary);
                color: white;
            }
        }
    }

    .remove-item {
        flex: 0 0 auto;
        width: 10%;
        min-width: 90px;
    }
}

// Mobile responsive styles
@media (max-width: 768px) {
    .swatches-container {
        .header {
            display: none;
        }

        .swatches-list {
            li.currency-item {
                background-color: var(--bb-body-bg) !important;
                border: var(--bb-border-width) var(--bb-border-style) var(--bb-border-color);
                border-radius: 8px;
                margin-bottom: 15px;

                + li {
                    margin-top: 15px;
                }

                .currency-row {
                    display: block;
                    padding: 15px;

                    > * {
                        float: none;
                        padding: 8px 0;
                        text-align: left;
                        width: 100% !important;
                        max-width: none !important;
                        display: block;
                    }

                    .swatch-item,
                    .swatch-is-default,
                    .swatch-advanced {
                        position: relative;
                        margin-bottom: 12px;

                        &::before {
                            content: attr(data-label);
                            display: block;
                            font-weight: 600;
                            margin-bottom: 5px;
                            color: var(--bb-body-color);
                            font-size: 14px;
                        }

                        .form-control,
                        .form-select {
                            width: 100%;
                        }
                    }

                    .swatch-advanced {
                        &::before {
                            content: 'Advanced Settings';
                        }

                        .toggle-advanced {
                            width: 100%;
                        }
                    }

                    .remove-item {
                        text-align: center;
                        margin-top: 15px;
                        padding-top: 15px;
                        border-top: var(--bb-border-width) var(--bb-border-style) var(--bb-border-color);

                        &::before {
                            display: none;
                        }
                    }
                }

                .currency-advanced-settings {
                    border-left: 0;
                    border-top: 3px solid var(--bb-primary);
                }
            }
        }
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}