/*!
 * 
  * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

 @import "../variables";
 @import "../variables/datatables_vars";
 @import "../mixins";
 
 .sr-only{
     position:absolute;
     left:-10000px;
     top:auto;
     width:1px;
     height:1px;
     overflow:hidden;
 }
 
 .dlt-data-table-container {
     @include component-vars(data-tables); //Mixin to define all the root variables
     width: 100%;
     // overflow-x: auto;
     background: $data-tables-color-background;
     padding: $data-tables-padding;
     border-radius: $data-tables-border-radii;
     font-family: $data-tables-font-family;

     .dlt-filter .dlt-tags__item{
         margin-right: 8px;

         span{
            margin-left: 0;
         }
     }

     .dlt-table-wrapper{
        &.sticky-header{
            overflow-y: auto;
            thead th{
                position: sticky!important;
                top: 0;
                z-index: 8;
                background: $data-tables-color-background;
                border: none;
                
                &::after{
                    width: 100%;
                    position: absolute;
                    content: " ";
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: -1;
                    border-top: 1px $data-tables-border-style $data-tables-color-border;
                    border-bottom: 2px $data-tables-border-style $data-tables-color-border;     
                    border-left: 0;
                    border-right: 0;
                    background: none;
                }
            }

            .dlt-filter{
                margin-top: 2px;
                z-index: 98;
            }

            .dlt-pagination {
                position: sticky;
                bottom: 0;
            }
        }
     }
 
     .dlt-pagination {
         @include box-shadow(inset 0px 1px 0px 0px $data-tables-color-border, inset 0px -1px 0px 0px $data-tables-color-border);
         margin-top: 0;
     }

     .dlt-overflow-menu{
         padding: 4px;
         
         .scroll-wrapper{
             height: auto;
             overflow: visible;
         }

         .dlt-switch-item{
            padding: 12px 0 0 0;
            height: 32px;
         }

         .dlt-switch-label{
             font-size: .875rem;
         }
     }
 
     .dlt-table-toolbar .dlt-form-item.sm-input {
         display: inline-block;
         width: 11rem;
 
         .search-icon {
             // right: 0.5rem;
             width: $data-tables-icon-size;
             height: $data-tables-icon-size;
             line-height: $data-tables-icon-size;
             font-size: $data-tables-icon-size;
         }
 
         .clear-icon {
             font-size: $data-tables-icon-size;
             width: $data-tables-icon-size;
             height: $data-tables-icon-size;
             line-height: $data-tables-icon-size;
         }
     }
     
     // Ignored and not tokenized 
     // since there are overriden by form elements directly. 
     // Keeping it since it could break the older version of code
     .dlt-text-input { 
         height: 1.5rem;
         padding: 0 0.5rem;
         line-height: 1.5rem;
     }
     //
     // Ignored and not tokenized 
     // since there are overriden by form elements directly. 
     // Keeping it since it could break the older version of code
 
     .dlt-select-input {
         height: 2rem;
         line-height: 30px;
         font-style: normal;
         color: $data-tables-color-text
     }
     //
 
     .dlt-textarea {
         height: $data-tables-textarea-height;
     }
 
     .dlt-table-header {
         position: relative;
         height: $data-tables-header-height;

         .dlt-button-icon {
            background-color: transparent;
            padding: 0;
            margin: 0;
            height: $data-tables-icon-button-size;
            width: $data-tables-icon-button-size;
            cursor: pointer;
            transition: none;
            font-size: $data-tables-icon-button-font-size;
            line-height: $data-tables-icon-button-line-height;
            outline: none;
    
            &:hover {
                color: $data-tables-color-primary;
                box-shadow: inset 0px 0px 0px 1px $data-tables-color-primary;
                outline: none;
            }
    
            &:focus {
                color: $data-tables-color-primary;
                border: 1px $data-tables-border-style $data-tables-color-primary;
                box-shadow: inset 0px 0px 0px 1px $data-tables-color-primary;
                outline: none;
            }
    
            &:active {
                color: $data-tables-color-primary !important;
                background-color: $data-tables-color-primary-light !important;
                border-color: $data-tables-color-primary !important;
            }
        }

     }
 
     .dlt-batch-actions {
         display: -webkit-flex;
         display: flex;
         position: absolute;
         top: 8px;
         left: 0;
         -webkit-align-items: center;
         align-items: center;
         opacity: 0;
         width: 100%;
         height: 48px;
         z-index: 1;
         background-color: transparent;
         transition: opacity .11s cubic-bezier(.2, 0, .38, .9), background-color .11s cubic-bezier(.2, 0, .38, .9);
         pointer-events: none;
         visibility: hidden;
 
         .dlt-batch-action-list {
             position: absolute;
             right: 0;
             margin-right: $data-tables-batch-action-margin;
 
             .dlt-button {
                 margin: 0;
                 margin-left: .25rem;
                 float: left;
             }
 
             .dlt-button:not(:last-child) {
                 margin-right: .25rem;
             }

             .dlt-icon-md{
                 font-size: var(--dlt-font-size-xxl, 1.5rem);
                 margin-right: var(--dlt-spacing-1-x, .5rem);
             }
         }
 
         .dlt-batch-summary {
             position: absolute;
             left: 0;
             margin-left: $data-tables-batch-action-margin-left;
             display: -webkit-flex;
             display: flex;
             -webkit-align-items: center;
             align-items: center;
             color: $data-tables-color-text-inverse;
 
             .dlt-batch-summary-text {
                 line-height: $data-tables-batch-summary-line-height;
                 margin: 0;
                 color: $data-tables-color-text-inverse;
             }
         }
 
         .dlt-button-secondary-white {
             border-color: transparent;
 
             &:hover,
             &:focus {
                 border-color: $data-tables-color-text-inverse;
             }
         }
 
         .vertical-line {
             border-left: 1px $data-tables-border-style $data-tables-color-border-separator;
             height: 32px;
             float: left;
         }
     }
 
     .dlt-batch-actions-active {
         visibility: visible;
         background-color: $data-tables-color-primary;
         pointer-events: all;
         transition: opacity .11s cubic-bezier(.2, 0, .38, .9), background-color .11s cubic-bezier(.2, 0, .38, .9);
         opacity: 1;
     }
 
     .dlt-data-table-title {
         font-weight: $data-tables-title-font-weight;
         font-size: $data-tables-title-font-size;
         color: $data-tables-color-text;
         position: relative;
         display: flex;
         line-height: $data-tables-title-line-height;
 
         span {
             white-space: nowrap;
         }
     }
 
     .dlt-data-table {
         border-collapse: collapse;
         border-spacing: 0;
         width: 100%;
         margin: 0;
 
         .dlt-checkbox {
             padding: 0;
             ;
 
             label {
                 padding: 0;
                 line-height: 0;
 
                 &::after {
                     top: 7px;
                 }
             }
 
             input[type="checkbox"]:checked+label::before,
             label::before {
                 position: relative;
             }
         }
 
         thead {
             font-size: $data-tables-font-size;
             font-weight: $data-tables-thead-font-weight;
             color: $data-tables-color-text;
 
             tr {
                 border: none;
                 width: 100%;
                 height: $data-tables-trow-height;
                 line-height: $data-tables-trow-height;
 
                 .checkbox-actions {
                     line-height: $data-tables-icon-size;
                     padding: $data-tables-chekbox-padding;
                 }
 
                 th {
                     border-top: 1px $data-tables-border-style $data-tables-color-border;
                     border-bottom: 2px $data-tables-border-style $data-tables-color-border;        
                     padding: 0;
                     white-space: nowrap;
                     font-weight: $data-tables-thead-font-weight;
 
                     .dlt-checkbox {
                         padding: 0;
                     }

                     &:first-child .sort-buttons{
                        padding: 0 .5rem;
                     }
 
                     .sort-buttons {
                         display: inline-block;
                         background: none;
                         -webkit-appearance: none;
                         -moz-appearance: none;
                         appearance: none;
                         border: 0;
                         cursor: pointer;
                         position: relative;
                         font: inherit;
                         text-align: left;
                         display: -webkit-flex;
                         display: flex;
                         -webkit-align-items: center;
                         align-items: center;
                         -webkit-justify-content: space-between;
                         justify-content: space-between;
                         width: 100%;
                         padding: 0 1rem;
 
                         &:focus {
                             outline: 2px solid var(--dlt-color-border-interactive-primary, #1776bf);
                             outline-offset: -1px;
 
                             .sort-icon {
                                 visibility: visible;
                             }
 
                         }
 
                         .sort-icon {
                             font-size: $data-tables-icon-size;
                             color: $data-tables-color-primary;
                             float: right;
                             visibility: hidden;
                         }
 
                         &:hover .sort-icon {
                             visibility: visible;
                         }
                     }

                     &.sorted  .sort-icon {
                        visibility: visible;
                     }
 
                     .truncate {
                         display: flex;
                         width: 100px;
 
                         span {
                             overflow: hidden;
                             text-overflow: ellipsis;
                             white-space: nowrap;
                             color: var(--dlt-color-text-interactive-secondary, $almost-black);
                         }
                     }
                 }
             }
         }
 
         tbody {
             font-size: $data-tables-font-size;
             color: $data-tables-color-text;
             font-weight: $data-tables-font-weight;
 
 
             tr {
                 margin: 0;
                 border: 0px $data-tables-border-style transparent;
                 @include box-shadow(inset 0px -1px 0px 0px $data-tables-color-border);
                 width: 100%;
                 background: $data-tables-color-background;

                 &:last-child{
                    box-shadow: none;
                 }

                 .dlt-form-item {
                     display: none;
                 }
 
                 td {
                     padding: 0 .5rem 0 .5rem;
                     white-space: nowrap;
 
                     .select-arrow-icon::after {
                         line-height: 1.5rem;
                         top: 4px;
                         right: 4px;
                         font-size: 24px;
                         color: var(--dlt-forms-color-icon-interactive-secondary, var(--dlt-component-color-icon-interactive-secondary, var(--dlt-color-icon-interactive-secondary, #1776BF)));
                     }
                 }
 
                 .child-row-content {
                     white-space: unset;
                     line-height: 1rem;
                     padding: var(--dlt-spacing-1-x-half, 12px) var(--dlt-spacing-2-x, 16px);
                 }
 
                 .data-editable {
                     padding: .25rem .5rem;
 
                     span {
                         display: block;
                         border: 2px $data-tables-border-style transparent;
                         height: 2rem;
                         line-height: 1.8rem;
                         padding: 0rem 0.5rem;
                     }

                     .chosen-single span{
                         height:30px;
                         line-height: 26px;
                         padding: 0;
                     }
 
                     &:hover>span {
                         border: 2px $data-tables-border-style $data-tables-color-primary;
                     }
 
                     .dlt-form-item {
                         width: auto;
                     }
 
                     .dlt-form-requirement {
                         display: none;
                         align-items: center;
                         padding: 0;
 
                         .error-message {
                             display: flex;
                             font-weight: $data-tables-font-weight;
                             font-size: $data-tables-font-size-sm;
                             padding: 0;
 
                             .error-title {
                                 font-weight: $data-tables-title-font-weight;
                                 padding: 0;
                                 line-height: $data-tables-form-span-line-height;
                             }
 
                             span {
                                 line-height: $data-tables-form-span-line-height;
                                 padding: 0;
                             }
 
                         }
 
                     }
                 }
 
                 .checkbox-actions {
                     line-height: $data-tables-icon-size;
                     padding: $data-tables-chekbox-padding;
 
                     .dlt-button {
                         margin: 0 .125rem;
                     }
 
                     .row-expand-button {
                         font-size: 1.4rem;
                     }
 
                 }
                
                 .row-actions {
                     line-height: $data-tables-icon-size;
                     padding: $data-tables-row-actions-padding;
 
                     .dlt-button {
                         margin: 0;
                         transition: none;
                     }
 
                     .row-expand-button {
                         font-size: 1.4rem;
                     }
 
                 } 
             }
 
             tr.dlt-child-row.dlt-row-expanded-hover-child {
                 border: $data-tables-border-width-hover $data-tables-border-style-hover $data-tables-color-primary;
                 border-bottom: $data-tables-border-width-hover $data-tables-border-style-hover transparent;
                 border-top: $data-tables-border-width-hover $data-tables-border-style-hover transparent;
                 @include box-shadow(inset 0px -1px 0px 0px $data-tables-color-border);
             }
 
             tr.dlt-child-row.dlt-row-expanded-hover-child-last {
                 border: $data-tables-border-width-hover $data-tables-border-style-hover $data-tables-color-primary;
                 border-top: $data-tables-border-width-hover $data-tables-border-style-hover transparent;
             }
 
             tr.dlt-child-row {
                 display: none;
             }
 
             .row-selected {
                 color: $data-tables-color-text-active;
                 background: $data-tables-color-background-active!important;
             }
 
 
         }
 
         .truncate {
             display: inline-block;
             width: 100px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             line-height: 1.9rem;
         }
 
         .action-buttons {
             background: none;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
             border: 0;
             cursor: pointer;
             height: $data-tables-icon-size;
             width: $data-tables-icon-size;
             font-size: $data-tables-icon-size;
 
             &:focus {
                 outline: none;
             }
         }
 
     }
 
     .dlt-filter + .dlt-data-table thead tr{
        border-top: 0;
     }

     .density-small tbody tr {
         line-height: $data-tables-density-sm;

         .row-actions .dlt-button-icon{
             height: var(--dlt-sizing-sm, 24px);
             width: var(--dlt-sizing-sm, 24px);

             em{
                 font-size: var(--dlt-font-size-sm, 1rem);
             }
         }

         .data-editable span{
            height: 24px;
            line-height: 20px;
         }

         .dlt-text-input{
            line-height: 18px;
            height: 24px;
         }

         .dlt-select-input{
             height: 24px;
             line-height: 22px;
         }

         .select-arrow-icon:after{
            line-height: 1rem !important;
            top: 4px!important;
            right: 4px!important;
            font-size: 1rem!important;
         }
     }
 
     .density-medium tbody tr {
         line-height: $data-tables-density-md;
     }
 
     .density-large tbody tr {
         line-height: $data-tables-density-lg;
     }
 
     .density-xlarge tbody tr {
         line-height: $data-tables-density-xl;
     }
 
     .zebra-stripes tbody tr.nonexpandable-zebra-stripes:nth-child(odd) {
         background-color: $data-tables-color-zebra-dark;
     }
 
    //  .zebra-stripes tbody tr.expandable-zebra-stripes {
    //      background: $data-tables-color-zebra-dark;
    //  }

     .zebra-stripes tbody tr.zebra-dark {
         background: $data-tables-color-zebra-dark;
     }
 
    //  .zebra-stripes tbody tr.expandable-zebra-stripes:nth-child(4n),
    //  .zebra-stripes tbody tr.expandable-zebra-stripes:nth-child(4n-1) {
    //      background: $data-tables-color-zebra-light;
    //  }
 
     .dlt-grid-view {
         border-left: 1px $data-tables-border-style $data-tables-color-border;
         border-right: 1px $data-tables-border-style $data-tables-color-border;
 
         td,
         th {
             border-left: 1px $data-tables-border-style $data-tables-color-border;
         }
 
         td:first-child,
         th:first-child {
             border-left: none;
         }
 
     }
 
 }
 
 .dlt-table-toolbar {
     display: -webkit-flex;
     display: flex;
     width: 100%;
     height: $data-tables-toolbar-height;
 
     align-items: flex-end;
     justify-content: flex-end;
 
     .dlt-toolbar-content {
         display: inherit;
         -webkit-justify-content: flex-end;
         justify-content: flex-end;
         margin: 1rem 0;
 
         > .dlt-button:not(:first-child) {
             margin: 0 .5rem;
         }
 
         .dlt-form-item {
             margin-bottom: 0;
         }
     }
 
     .dlt-dropdown {
         line-height: .75rem;
         font-size: 0.75rem;
     }
 
 }
 
 
 
 /* Datatable icon dropdown -- Start --*/
 
 .dlt-more-menu {
     display: inline-block;
     position: relative;
 }
 
 //Modal container for tables
 .modal-container {
 
     .dlt-table-modal {
 
         @include box-shadow(var(--dlt-elevation-lg));
         width: 580px;
         background-color: $data-tables-color-background;
         padding: 2.5rem;
         margin-bottom: .375rem;
         position: relative;
         border-radius: $data-tables-border-radii;
 
         .dlt-form {
             margin-top: 1.5rem;
         }
 
         .dlt-textarea {
             height: 5rem;
         }
 
         .form-items-wrapper {
             height: 17.5rem;
             overflow: auto;
 
             .mCSB_inside>.mCSB_container {
                 margin-right: 0;
             }
 
             .mCSB_scrollTools {
                 width: .25rem;
                 background: $data-tables-color-scrollbar-track;
                 border-radius: $data-tables-border-radii!important;
             }
 
             .mCSB_draggerContainer {
                 right: 0 !important;
             }
 
             .mCSB_dragger_bar {
                 border-radius: 0 !important;
                 background-color: $data-tables-color-scrollbar-thumb !important;
                 border-radius: $data-tables-border-radii!important;
             }
 
             .mCSB_draggerRail {
                 opacity: 0;
                 border-radius: $data-tables-border-radii!important;
             }
         }
 
         .checkbox-count {
             margin-top: 1rem;
             color: $data-tables-color-input-border;
         }
 
         .form-row {
             margin: 0;
             margin-top: 1.5rem;
             margin-right: 1.5rem;
         }
 
         .modal-title {
             font-size: $data-tables-title-font-size;
             line-height: 1.5rem;
             font-weight: $data-tables-title-font-weight;
         }
 
         .buttons-wrapper {
             display: flex;
             justify-content: flex-end;
             align-items: center;
             margin-top: 2.5rem;
 
             .dlt-button {
                 margin-left: .5rem;
             }
         }
 
         .close-modal {
             color: $data-tables-color-icon-muted-secondary;
             font-size: 1.5rem;
             cursor: pointer;
             position: absolute;
             right: $data-tables-icon-size;
             top: $data-tables-icon-size;
         }
 
     }
 
     /* Create two equal columns that floats next to each other */
     .form-column {
         float: left;
         width: 50%;
     }
 
     .form-column:not(:last-child) {
         margin-right: 1rem;
     }
 
     /* Clear floats after the columns */
     .form-row:after {
         content: "";
         display: table;
         clear: both;
     }
 }