@use "sass:map";
@use "sass:color";

@use "./variables" as *;
@use "./functions.scss" as *;
@use "cx/src/index" as *;

@use "cx/src/util/scss/include.scss" as *;

$block: map.get($cx-besm, block);
$element: map.get($cx-besm, element);
$state: map.get($cx-besm, state);
$mod: map.get($cx-besm, mod);

@if (cx-included("cx/widgets/Section")) {
   //SECTION
   $section-mods: primary success error warning;

   @for $i from 1 through 6 {
      .#{$element}section-header h#{$i} {
         .#{$mod}card & {
            color: $cx-theme-primary-text-color;
         }

         @each $item in $section-mods {
            .#{$mod}#{$item} & {
               color: #fff;
            }
         }
      }
   }

   .#{$element}section-header.#{$element}section-header {
      color: $cx-theme-primary-color-light;
      font-weight: normal;
      border: none;
      padding: 1em 1em 0;
      margin: 0;

      .cxm-pad > & {
         border: none;
      }
   }

   // can be used interchangeably with mod='card'
   .cxm-well {
      @extend .cxm-card;
   }
}

@if (cx-included("cx/widgets/Button")) {
   //BUTTON
   .#{$block}button {
      // overrides tap color effect for mobile devices
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

      // aligns float button icon in the center
      &.cxm-float .#{$element}button-icon {
         left: (
               $cx-default-box-line-height +
                  2 *
                  ($cx-default-box-padding + 1px) +
                  10px -
                  $cx-default-icon-size
            ) *
            0.5;
      }
   }
}

@if (cx-included("cx/widgets/Select")) {
   // select
   .cxb-select option {
      color: $cx-default-color;
      background-color: rgba(0, 0, 0, 0.03);
   }
}

@if (cx-included("cx/widgets/Calendar")) {
   .#{$block}calendar {
      td {
         border-radius: $cx-default-border-radius;
      }

      .#{$element}calendar-day-names {
         color: $cx-theme-primary-text-color;

         th {
            font-size: 11px;
            text-transform: uppercase;
            font-weight: bold;
         }
      }
      // monthpicker
      td.#{$state}unselectable {
         filter: blur(1.5px);
         border-radius: 0;
      }
   }
}

@if (cx-included("cx/widgets/MonthPicker")) {
   // monthpicker
   .#{$block}monthpicker {
      background: white;

      .#{$element}monthpicker-year {
         font-weight: 500;
      }
   }
}

@if (cx-included("cx/widgets/ColorPicker")) {
   // colorpicker
   .#{$block}colorpicker {
      input {
         box-shadow: none;
         background-color: #fff;
         border-width: 0 0 1px;
         border-color: color.adjust(
            $cx-default-input-border-color,
            $lightness: -5%
         );
         border-radius: 0;
         padding: 2px 0;

         &:focus {
            box-shadow: none;
         }
      }
   }
}

@if (cx-included("cx/widgets/Switch")) {
   // switch focus effect
   .#{$element}switch-axis {
      border: 1px solid $cx-default-input-border-color;
   }

   // switch focus effect
   .#{$element}switch-handle {
   }
}

@if (cx-included("cx/widgets/Tab")) {
   //TAB
   .#{$block}tab.#{$mod}classic {
      &:first-child {
         border-left-width: 1px;
         border-left-color: $cx-default-border-color;
      }
   }

   .#{$block}classic-tab-container {
      background-color: $cx-theme-primary-color;
      box-shadow: $cx-theme-box-shadow;
      height: 2 * $cx-default-box-padding + $cx-default-box-line-height + 2px;
      padding: 0;
      margin-bottom: 3px;
      white-space: nowrap;
      flex-shrink: 0;
   }

   .#{$block}tab.cxm-classic {
      height: 100%;

      &:first-child {
         border-radius: 2px 0 0 2px;
      }
      &:last-child {
         border-radius: 0 2px 2px 0;
      }
   }

   .#{$block}tab {
      position: relative;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   }
}

@if (cx-included("cx/widgets/Window")) {
   .#{$block}window {
      &.#{$state}animate {
         opacity: 0;
         transform: scale(0.3);
         transition:
            opacity 0.2s,
            transform 0.2s;
      }

      &.#{$state}animated {
         opacity: 1;
         transform: none;
         transition:
            opacity 0.3s,
            transform 0.3s;
      }
   }

   .#{$element}window-shadow {
      &.#{$state}animate {
         opacity: 0;
         transition: opacity 0.2s;
      }

      &.#{$state}animated {
         opacity: 1;
      }
   }
}

@if (cx-included("cx/widgets/Menu")) {
   .#{$block}menu {
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

      // menu focus animation
      .#{$state}focusable > .#{$block}menuitem {
         padding-top: 0;
         padding-bottom: 0;
      }
   }

   .#{$block}menu .#{$element}menu-item > hr {
      margin: $cx-default-padding-medium 0;
   }

   .cxs-vertical > .cxe-menuitem-arrow {
      transform-origin: 6px;
   }
}

@if (cx-included("cx/widgets/Grid")) {
   .#{$element}grid-fixed-header {
      // shadow added to fixed header
      box-shadow: $cx-default-grid-header-box-shadow;
   }

   // grid header border removed
   .#{$state}header-default .#{$element}grid-col-header:not(:last-child) {
      border-right-width: 0;
   }

   // default grey border color in group grid changed
   .#{$element}grid-group-caption {
      td {
         background-color: rgba(0, 0, 0, 0.03);
         border-bottom: 1px solid $cx-default-grid-data-border-color;
      }

      @for $i from 2 through 4 {
         &.#{$state}level-#{$i} {
            td {
               border-bottom: 1px solid $cx-default-grid-data-border-color;
               font-weight: 600;
               background-color: color.adjust(#f7f7f7, $lightness: -1% * $i);
            }
         }
      }
   }

   .#{$element}grid-group-footer {
      @for $i from 2 through 4 {
         &.#{$state}level-#{$i} {
            td {
               border-width: 1px 0;
               border-color: $cx-default-grid-data-border-color;
            }
         }
      }
   }

   // grid checkbox margin corrected
   .#{$block}grid {
      .#{$block}checkbox {
         padding: 0;
      }
      .#{$element}grid-col-header-tool {
         .#{$block}checkbox {
            padding: $cx-default-container-padding + 2px;
         }
      }
   }

   // grid shadow mod
   .#{$block}grid.#{$mod}shadow {
      box-shadow: $cx-theme-box-shadow;
      border-width: 0 !important;
   }
}

@if (cx-included("cx/widgets/List")) {
   //LIST
   .#{$block}list.#{$state}selectable {
      > .#{$element}list-item {
         border-width: 1px;
         border-color: transparent transparent rgba(0, 0, 0, 0.09);
      }
   }
}

//SCROLLBAR
@if ($cx-include-global-rules) {
   @media screen and (min-width: 700px) {
      ::-webkit-scrollbar {
         width: 10px;
         height: 10px;
         background-color: rgba(0, 0, 0, 0.05);
      }
      ::-webkit-scrollbar-thumb {
         -webkit-border-radius: 0;

         &:vertical {
            background-color: rgba(0, 0, 0, 0.07);
            &:hover {
               background-color: rgba(0, 0, 0, 0.12);
            }
         }

         &:horizontal {
            background-color: rgba(0, 0, 0, 0.07);
            &:hover {
               background-color: rgba(0, 0, 0, 0.12);
            }
         }
      }
      ::-webkit-scrollbar-corner {
         background-color: rgba(0, 0, 0, 0.02);
      }
   }
}

@if (cx-included("cx/widgets/Dropdown")) {
   .cxb-dropdown {
      animation: drop-appear 0.1s;
   }

   @keyframes drop-appear {
      from {
         transform: translateY(-30px);
         opacity: 0;
         pointer-events: none;
      }

      to {
         transform: none;
         opacity: 1;
      }
   }
}