@import "_variables";

@font-face {
    font-family: "LUI icons";
    src: url(../../node_modules/qdt-lui/dist/lui-icons.woff) format('woff'),
        url(../../node_modules/qdt-lui/dist/lui-icons.ttf) format('truetype');
  }

/****************
 * QdtFilter
*****************/
.lui-select { border-color: $gray-400 !important; }
.qdt-filter-state-counts-bar {
    position: relative;
    height: 0.25rem;
    background-color: $gray-300;
    border-left: 1px solid $gray-300;
    border-right: 1px solid $gray-300;
}
.O { // Optional
  color: $gray-900 !important;
}
.S { // Selected
  color: $gray-100 !important;
  background-color: $qlik-green !important;
}
.A { // Alternative
  color: $gray-900 !important;
  background-color: #dddddd !important;
}
.X { // Excluded 
  color: $gray-100 !important;
  background-color: #A9A9A9 !important;
}
.XS { // Excluded Selected
  color: $gray-100 !important;
  background-color: #A9A9A9 !important;
}

.lui-list .lui-list__item { 
    display: block;
    cursor: pointer; 
    &:after { min-height: 10px !important;  }
    &.S, &.A, &.X, &.XS { border-bottom: 1px solid #fff; }
}

.fixed-table {
  table-layout: fixed;
}
th {
  position: relative;
  cursor: pointer;
}
th, td {
  overflow: hidden;
}
th.active:after {
  position: absolute;
  top: calc(50% - 0.125rem);
  margin-left: 0.5rem;
  content:"";
  width: 0; 
  height: 0; 
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.5rem solid #666;
}
.lui-select { border-radius: 0 !important; }
.lui-tab.lui-active, .lui-tab:focus, .lui-tab.lui-focused { border-bottom: 2px solid $color-green-qlik; }
// .lui-tab { display: inline-block; }

/****************
 * QdtButton 
*****************/
.qtd-button {
    display: inline-block;
    cursor: pointer;
}

/****************
 * QdtTable 
*****************/
// We need to offset for the scoll bar width in the QdtBody
.qtd-table-header {
    width: 100%;
    width: calc(100% - 18px);
    width: -moz-calc(100% - 18px);
    width: -webkit-calc(100% - 18px);
}
.qtd-table-body { 
    width: 100%; 
    tr:nth-child(even) { background: $gray-200 }
}

/**********************
 * QdtSelectionToolbar
**********************/
.qdt-selection-toolbar {
    ul {
        padding: 0;
        font-size: 13px;
        li {
            display: inline-block;
            padding-right: 5px;
            .dropdown-item {
                font-size: 13px;
                padding-top: 5px;
                padding-bottom: 5px;
                padding-left: 10px;
                padding-right: 25px;
            }
            lui-button {
                border: 1px solid $gray-400;
                padding: 5px 10px;
                cursor: pointer;
                position: relative;
                display: inline-block;
            }        
            .btn-secondary {
                color: $gray-900 !important;
                background-color: #FFFFFF !important;
                font-size: 13px;
                border: 0;
                padding: 5px 10px;
                &:focus {
                    box-shadow: 0;
                }
            }
            .clear-all {
                padding-left: 15px;
            }
        }
    }
    .lui-icon {
        font-size: 13px;
        padding-left: 2px;
    }
    .lui-icon--remove {
        color: $red;
        cursor: pointer;
        &:hover {
            color: $orange;
        }
        &.pull-right {
            position: absolute;
            right: 0;
            padding-right: 5px;
        }
    }
}

/**********************
 * QdtChart
**********************/
.qtd-chart {
    .qdt-chart-header {
        height: 30px;
        .qdt-chart-selection {
            // display: none;
            text-align: right;
            // position: absolute;
            // right: 0;
            // top: -30px;
            .lui-button {
                border: 0;
                padding: 0;
                margin-left: 5px;
                // .lui-icon--tick { color: #77b62a }
                .lui-icon--remove { color: #F37777 }
            }
        }
    }
    .qdt-chart-svg {
        position: relative;
        rect { 
            // fill: #49637A;
            &:hover {
                fill: #77b62a!important;
            }
         }
         circle,
         rect,
         path {
            cursor: pointer;
         }
    }
    &::-webkit-scrollbar { 
        width: 10px; 
        height: 10px; 
    }     
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 5px;
    }     
    &::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
      border-radius: 5px;
    }
}

.qdt-tooltip {
    position: relative;
    background: #000000;
    border: 1px solid #d1d1d1;
    color: white;
    padding: 15px;
    display: none;
    z-index: 9999999;
    &:after, 
    &:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }    
    &:after {
        border-color: rgba(0, 0, 0, 0);
        border-top-color: #000000;
        border-width: 10px;
        margin-left: -10px;
    }
    &:before {
        border-color: rgba(209, 209, 209, 0);
        border-top-color: #d1d1d1;
        border-width: 11px;
        margin-left: -11px;
    }
}

/**********************
 * Preloader
**********************/
.qtd-preloader-bg { 
    background-color: black; 
}
.qtd-preloader {    
    .qtd-preloader-ball1 {
        background-color: rgba(0,0,0,0);
        border: 5px solid rgba(0,183,229,0.9);
        opacity: .9;
        border-top: 5px solid rgba(0,0,0,0);
        border-left: 5px solid rgba(0,0,0,0);
        border-radius: 50px;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        -moz-animation: spin .5s infinite linear;
        -webkit-animation: spin .5s infinite linear;
    }
    .qtd-preloader-ball2 {
        background-color: rgba(0,0,0,0);
        border: 5px solid rgba(0,183,229,0.9);
        opacity: .9;
        border-top: 5px solid rgba(0,0,0,0);
        border-left: 5px solid rgba(0,0,0,0);
        border-radius: 50px;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        position: relative;
        top: -50px;
        -moz-animation: spinoff .5s infinite linear;
        -webkit-animation: spinoff .5s infinite linear;
    }
    .qtd-preloader-dots:after {
        content: ' .';
        animation: dots 500ms steps(5, end) infinite;
    }
    @-moz-keyframes spin {
        0% {
            -moz-transform: rotate(0deg);
        }
    
        100% {
            -moz-transform: rotate(360deg);
        };
    }    
    @-moz-keyframes spinoff {
        0% {
            -moz-transform: rotate(0deg);
        }
    
        100% {
            -moz-transform: rotate(-360deg);
        };
    }    
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
    
        100% {
            -webkit-transform: rotate(360deg);
        };
    }    
    @-webkit-keyframes spinoff {
        0% {
            -webkit-transform: rotate(0deg);
        }
    
        100% {
            -webkit-transform: rotate(-360deg);
        };
    }
    
    @keyframes dots {
        0%, 20% {
        color: rgba(0,0,0,0);
        text-shadow:
            .25em 0 0 rgba(0,0,0,0),
            .5em 0 0 rgba(0,0,0,0);}
        40% {
        color: white;
        text-shadow:
            .25em 0 0 rgba(0,0,0,0),
            .5em 0 0 rgba(0,0,0,0);}
        60% {
        text-shadow:
            .25em 0 0 white,
            .5em 0 0 rgba(0,0,0,0);}
        80%, 100% {
        text-shadow:
            .25em 0 0 white,
            .5em 0 0 white;
        }
    }
}

/**********************
 * QdtSearch
**********************/
.lui-search {
    border: 1px solid $gray-300;
    .lui-list {
        &.lui-list__item {
            text-align: left;
        }
    }
}

/**********************
 * QdtSequencer
**********************/
button:focus { outline: 0 !important; }
.lui-icon-rotate-180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}