@import "../ui.vars.less";
sc-tab {
    border-bottom: 1px solid transparent;
    min-width: auto;
    max-height: 60px;
    text-align: left;
    padding: 14px 0;
    margin: 3px 15px 0 0;

    color: @scText;
    font-size: 15px;
    font-weight: 400; 

    @media only screen and (max-width: @mobile-landscape) {
        margin-left: 0px;
    }

    &[selected] {
        border-bottom-color: fade(@scAction, 100%);
        color: @scAction;
        border-bottom-width: 3px;
        opacity: 1;
        p, h6 {
            color: @scAction;
        }
    }

    &:hover {
        border-bottom-width: 1px;
        color: @scAction;
        opacity: 1;
        border-bottom-color: fade(@Slate_500, 100%);
        padding: 14px 0 16px 0;
        h6 {
            color: @scText;
        }
    }

    &[selected]:hover {
        border-bottom-color: fade(@scAction, 100%);
        border-bottom-width: 3px;
        padding: 14px 0;
        p, h6 {
            color: @scAction;
        }
    }
}