@import 'constants';

@mixin tabs-base {
    user-select: none;
    align-items: stretch;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

@mixin tabs-colors {
    @each $colorName, $color in $color-list {
        &.#{$colorName} {
            li {
                &.active {
                    a {
                        border-bottom-color: $color;
                        color: $color;
                        &:hover, &:focus {
                            color: $color-white;
                        }
                    }
                }

                &:hover, &:focus {
                    background: $color;
                }

                &:active {
                    background: darken-1($color);
                }

                a {
                    &:hover, &:focus {
                        border-bottom-color: $color;
                    }
                    &:active {
                        border-bottom-color: darken-1($color);
                    }
                }
            }

            &.boxed {
                li {
                    &.active {
                        a {
                            color: $color;
                            border-color: $color;

                            &:hover, &:focus {
                                color: $color-white;
                                background: $color;
                            }
                            &:active {
                                background: darken-1($color);
                                border-color: darken-1($color);
                            }
                        }
                    }
                }
            }
        }
    }
}