@use "../../../../../../dev/assets/sass/_settings/mixinscontrast" as *;

.style-guide {
    .m-wrapper {
        &.is-contrast {
            .tab-content {
                .tab-panel {
                    @include contrast-theme($color-white, $color-black, false);

                    .sg-color-palette {
                        .color-swatch {
                            @include contrast-theme($color-white, $color-black, true) ;
                        }
                    }
                }
            }

            .tabs {
                .tab-btn {
                    &.active {
                        @include contrast-theme(transparent, $color-black, false);
                        border-bottom-color: $color-black;
                    }
                }
            }
        }

        .m-header {
            text-align: center;
            margin: 50px 0;

            padding: 15px;

            &.is-header-contrast {
                @include contrast-theme($color-black, $color-white, false);
            }

            h1 {
                color: $color-primary;
            }
        }

        .tabs {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 5px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;

            .tab-buttons {
                display: flex;
                border-bottom: 1px solid $color-border;
                background: $color-white;
            }

            .tab-btn {
                flex: 1;
                padding: 15px;
                font: inherit;
                border: none;
                background: none;
                cursor: pointer;
                font-weight: 500;
                border-bottom: 3px solid transparent;
                transition: 0.2s;

                &:hover {
                    background: #f1f5f9;
                }

                &.active {
                    border-bottom-color: $color-primary;
                    color: $color-primary;
                }
            }

            .tab-content {
                padding: 35px;

                .tab-panel {
                    display: none;

                    &.active {
                        display: block;
                    }

                    .headline {
                        color: $color-primary;
                    }

                    .tab-button,
                    .nav-button {
                        display: flex;
                        flex-direction: row;
                        align-content: center;
                        gap: 15px;
                        margin-bottom: 30px;
                    }

                    .sg-color-palette {
                        display: flex;
                        gap: 15px;
                        margin-bottom: 50px;

                        .color-swatch {
                            flex: 1;
                            color: white;
                            padding: 25px;
                            border-radius: 5px;
                            text-align: center;

                            &.primary {
                                background: $color-primary;
                            }

                            &.secondary {
                                background: $color-secondary;
                            }

                            &.tertiary {
                                background: $color-tertiary;
                            }

                            &.accent {
                                background: $color-accent;
                            }

                            &.black {
                                background: $color-black;
                            }

                            &.dark-grey {
                                background: $color-dark-grey;
                            }

                            &.medium-grey {
                                background: $color-medium-grey;
                            }

                            &.light-grey {
                                background: $color-light-grey;
                                color: $color-medium-grey;
                            }

                            &.off-white {
                                background: $color-off-white;
                                color: $color-medium-grey;
                            }

                            &.white {
                                background: $color-white;
                                color: $color-medium-grey;
                                border: 1px solid $color-light-grey;
                            }
                        }
                    }
                }
            }
        }
    }
}