$main-font-family:'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif;

$photos-main-color:#6D6D6D;
$photos-second-color:#EE7800;
$light-gray:#9D9D9D;
$photos-main-font-size:18px;
$photos-second-font-size:14px;
$photos-mob-main-font-size:16px;
$photos-mob-second-font-size:12px;
$photos-main-family:'Microsoft JhengHei', Helvetica,Noto Sans TC,Roboto,Arial,sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";


//通用類別

.bg-cover{
    background-size: cover;
    background-position: center center;
}

.bg-main{
    background-color: #FAFAFA;
}

.bg-white{
    background-color: #fff;
}

.bg-shadow{
    box-shadow: 0px 0px 5px #D1D2D3;
}

.no-padding{
    padding:0;
}

.no-border{
    border: none;
}

.circle-img{
    width:30px;
    height:30px;
    border-radius: 50%;
    border:1px solid black;
}

.accent-text{
    caret-color: #000;
}

.focus-status{
    &:focus{
        border-color: transparent;
        box-shadow: none;
    }
}

//目前圖庫卡片列表有使用

.narrow-sm-gutter{
    padding-left:10px;
    padding-right:10px;
}

.wide-mg-gutter{
    padding: 0 20px;
}

//scroll-top btn
.top-btn {
    z-index: 9;
    text-align: center;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 30px;
    border-radius: 100px;
    line-height: 3;
    background-color: #EE7800;
    cursor: pointer;
}

//內容列表頁標題
.list-head{
    font-weight: bold;
    font-size: 1.5rem;
    font-family: $main-font-family;
}

//關鍵字 autocomplete
.keywords-autocomplete{
    width: 40%;
    z-index: 50;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-25%);

    //type 2
    .list-group-item{
        box-shadow: 1px 1px 1px #ccc ;
    }

    .list-group-item-action{
        &:hover{
            z-index: 0;
        }
    }

    .keywords-autocomplete-type{
        color: #EE7800;
    }
}

.keywords-autocomplete-tri::before{
    content:'';
    border: 0 solid transparent;
    border-right-width: 14px;
    border-left-width: 14px;
    border-bottom: 14px solid #e2e2e2;
    width: 0px;
    height: 0px;
    transform: translateY(20%);
    position: relative;
    left: 5%;
}

//列表 gotop btn
.gotop-btn-wrapper{
    display: block;
    position: fixed;
    right: 1%;
    bottom: 4%;
    cursor: pointer;

    .gotop-btn{
        width: 50px;
        height: 50px;
        box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
        opacity: 1;
        &:hover, &:focus, &:active{
            box-shadow: 5px 3px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        }
    }
}

//圖庫 0800、隱私保護、關於本站、登出icon改成橘色
.text-primary.text-photo-color{
    color: $photos-second-color !important;
}

//找靈感廣宣需求
.text-promote-color{
    color: #EE7800 !important;

    &:active, &.active{
        background-color: transparent !important;
        border-bottom: 4px solid #EE7800 !important;
        @media screen and (max-width: 576px) {
            background-color: unset !important;
            border-bottom: 0 solid transparent !important;
        }
    }

    &:hover{
        color: #EE7800 !important;
        background-color: transparent !important;
        @media screen and (max-width: 576px) {
            background-color: #F4F4F4 !important;
        }
    }
}

.text-promote-mb-color{
    color: #EE7800 !important;
}

//fb訂閱按鈕
.subscript-btn{
    display: flex;
    color: #FFF;
    background-color: #1977F3;
    border-radius:20px;
    padding: 5px 15px;

    .subscript-btn-circle{
        position: relative;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: #FFF;
        margin-right: 5px;
    }

    .subscript-btn-img{
        position: absolute;
        bottom: 0;
        left: 28%;
    }
}

//另加
[v-cloak] {
    display: none;
}