//  ----------------------------------------------------------------------------
//
//  @BUTTON
//
//  Component styling for button
//
//  ----------------------------------------------------------------------------
//
//  CONTENTS
//
//      1.  DEPENDENCIES
//      2.  VARIABLES
//      3.  CORE
//
//  ----------------------------------------------------------------------------


//  1. DEPENDENCIES
//  ----------------------------------------------------------------------------

@import '../../../core/src/variables';
@import '../../../core/src/mixins';



//  2. VARIABLES
//  ----------------------------------------------------------------------------

$card-spacing           : $spacing-md !default;
$card-spacing-sm        : $spacing-sm !default;


//  3. CORE
//  ----------------------------------------------------------------------------

.c-tab,,
.c-tab__item {
    display: -ms-flexbox;
    display: flex;
}

.c-tab__item {
    align-items: center;
    justify-content: center;

    &.is--disabled {
        opacity: 0.4;
        pointer-events: none;
        cursor: default;
    }
}

.c-tab {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 $spacing-md;

    &:not(.c-tab--buttons) {
        border-bottom: 1px solid $haze-300;

        .c-tab__item {
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            padding-bottom: $spacing-xs;

            &:hover {
                border-color: $haze-400;
            }

            &:not(.c-btn) {
                color: $font-base-color;
                line-height: 20px;
                text-decoration: none !important;
                outline: none !important;
                padding: $spacing-xs $spacing-sm $spacing-sm;

                .icon-svg{
                    fill: $font-base-color;
                }
            }

            &.is--active {
                border-color: $font-link-color;

                &:not(.c-btn) {
                    color: $font-link-color;

                    .icon-svg {
                        fill: $font-link-color;
                    }
                }
            }
        }

        .c-tab__item--right {
        }
    }
}

.c-tab__pane {
    display: none;
    outline: none !important;

    &.is--active {
        display: block;
    }

    > *:last-child {
        margin-bottom: 0;
    }
}


.c-tab--justified {
    > .c-tab__item {
        flex: 1;
    }
}

.c-tab--center {
    justify-content: center;
}

.c-tab--buttons {
    > .c-tab__item {
        border-radius: 0;

        &:first-child {
            @include rounded-left();
        }

        &:last-child {
            @include rounded-right();
        }
    }
}

.c-tab--justified,
.c-tab--buttons {
    > .c-tab__item:not(:first-child) {
        margin-left: -1px !important;
    }
}

.c-card__tabs {
    > .c-tab {
        padding: $card-spacing-sm 0 0;
        margin: 0 $card-spacing;
    }

    > .c-tab-content {
        padding: $card-spacing-sm $card-spacing;

    }
}