/**
*  Styles for 'tabs'
*  Use below classes for buttons in your application
*  <div class="tabs-component amadeus-hos-res-cn-tabs">
    *  <ul class="nav nav-tabs amadeus-hos-res-cn-tabs-ul" id="amadeus-hos-res-id-shop-room-details-tabs" role="tablist">
            <li class="nav-item">
                <a data-toggle="tab" href="javascript:void(0);" class="nav-link active-new amadeus-hos-res-cn-tabs-link">Tab 1</a>
            </li>
            <li class="nav-item">
                <a data-toggle="tab" href="javascript:void(0);" class="nav-link active-new amadeus-hos-res-cn-tabs-link">Tab 2</a>
            </li>
        </ul>
        <div class="tab-content"></div>
*   </div>
*/

.amadeus-hos-res-cn-tabs {
    ul.amadeus-hos-res-cn-tabs-ul {
        margin: 0;
        padding-inline-start: 0;
        padding: 40px 48px 0 48px;
        border: none;

        .nav-item {
            margin-right: 40px;

            a.amadeus-hos-res-cn-tabs-link {
                padding: 8px 0;

                &.nav-link {
                    border: none;
                    font-size: $body-font-size;
                    font-weight: $font-weight-bold;
                    letter-spacing: 0.15px;
                    color: $supporting-button-bg-color;
                    @include amadeusHosResWcBorderRadius(0);

                    &:hover {
                        border-bottom: 3px solid $body-text-links-color;
                    }
                }

                &.active-new {
                    border-bottom: 3px solid $body-text-links-color;
                    color: $body-text-links-color;

                    &:hover {
                        border-top: transparent;
                        border-left: transparent;
                        border-right: transparent;
                    }
                }
            }
        }
    }

    .tab-content {
        padding: 40px 48px;
        background-color: $box-background-color;
        color: $default-body-text-color;
    }
}