// Forward theme variables to configure cx
@forward "./variables";

// Load variables and maps
@use "sass:color";
@use "sass:map";
@use "./variables" as *;
@use "./maps" as *;

// Load cx widget and ui styles (generates CSS using configured values)
@use "cx/src/widgets/index" as widgets;
@use "cx/src/ui/index" as ui;

// Load clockwise utilities for cx-top, cx-right, etc.
@use "cx/src/util/scss/clockwise" as *;
// Load calc utilities for cx-calc
@use "cx/src/util/scss/calc" as *;

// Theme-specific CSS overrides
$block: map.get($cx-besm, block);
$element: map.get($cx-besm, element);
$state: map.get($cx-besm, state);
$mod: map.get($cx-besm, mod);

//SECTION
@if (cx-included("cx/widgets/Section")) {
   .#{$block}section.#{$state}pad {
      > .#{$element}section-body {
         padding: 1em;
      }
   }

   @for $i from 1 through 6 {
      .#{$element}section-header h#{$i} {
         .#{$mod}card & {
            color: $cx-theme-primary-color-light;
         }
         .#{$mod}primary &,
         .#{$mod}error &,
         .#{$mod}success & {
            color: #fff;
         }
         .#{$mod}warning & {
            color: $cx-default-color;
         }
      }
   }

   .#{$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;
   }
}

//BUTTON
@if (cx-included("cx/widgets/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;
      }
   }
}

//FORM
// standard field
$form-list: (TextField NumberField LookupField DateTimeField MonthField ColorField Select);

@each $field in $form-list {
   @if (cx-included("cx/widgets/#{$field}")) {
      .#{$block}#{to-lower-case($field)} {
         position: relative;

         -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

         // disables parent input div height to grow bigger then input in FlexRow
         max-height: $cx-default-box-line-height +
            2 *
            cx-top($cx-default-box-padding) +
            2 *
            cx-top($cx-default-border-width);

         // standard field focus effect
         &:after {
            display: block;
            content: "";
            height: 2px;
            width: 100%;
            background-color: $cx-theme-primary-color;
            transform: scaleX(0);
            transition: 0s;
            position: absolute;
            bottom: 0;
            left: 0;
         }

         &.#{$state}focus {
            &:after {
               transform: scaleX(1);
               transition: transform 0.3s ease-out;
            }
            &.#{$state}error {
               &:after {
                  transform: scaleX(1);
                  background-color: $cx-theme-danger-color;
               }
            }
         }
      }
   }
}

// lookupfield
@if (cx-included("cx/widgets/LookupField")) {
   .#{$block}lookupfield {
      max-height: none;
   }
}

// padding in fields with icon
.#{$element}datefield-input,
.#{$element}monthfield-input,
.#{$element}colorfield-input {
   padding: cx-top($cx-theme-input-padding)
      cx-calc(cx-right($cx-theme-input-padding), $cx-default-box-padding, $cx-default-clear-size)
      cx-bottom($cx-theme-input-padding)
      cx-calc(cx-left($cx-theme-input-padding), $cx-default-box-padding, $cx-default-icon-size);
}

@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/TextArea")) {
   // textarea
   .#{$block}textarea {
      // textarea focus effect
      &:after {
         display: block;
         content: "";
         height: 2px;
         width: 100%;
         background-color: $cx-theme-primary-color;
         transform: scaleX(0);
         transition: 0s;
         position: absolute;
         bottom: 0;
         left: 0;
      }

      &.#{$state}focus {
         &:after {
            transform: scaleX(1);
            transition: transform 0.3s ease-out;
         }

         &.#{$state}error.#{$state}visited {
            &:after {
               transform: scaleX(1);
               background-color: $cx-theme-danger-color;
            }
         }
      }
   }
}

//ANIMATED LABELS
.#{$mod}label-placement-material {
   margin-top: round(1.5 * $cx-default-box-line-height);

   & > .#{$block}label {
      position: absolute;
      top: 0;
      left: 0;
      transition: margin-left 0.2s linear, margin-top 0.2s linear, font-size 0.2s linear;
      color: $cx-default-input-placeholder-color;
      font-size: $cx-default-input-font-size;
      pointer-events: none;
      white-space: nowrap;
   }

   &.#{$state}focus,
   &.#{$state}error,
   &:not(.#{$state}empty) {
      & > .#{$block}label {
         pointer-events: auto;
         margin-top: -$cx-default-box-line-height - cx-top($cx-default-box-padding) * 0.5 + 2px;
         color: rgba($cx-default-label-color, 0.6);
         font-size: $cx-default-label-font-size;
         padding-bottom: 0;
         border-bottom-width: 0;
      }

      &.#{$state}icon > .#{$block}label {
         margin-left: cx-calc(-$cx-default-icon-size, -$cx-default-box-padding);
      }
   }

   &.#{$state}focus {
      & > .#{$block}label {
         color: $cx-theme-primary-color;
      }
   }

   &.#{$state}error > .#{$block}label {
      color: $cx-theme-danger-color;
   }

   &.#{$state}icon {
      & > .#{$block}label {
         left: cx-calc($cx-default-icon-size, $cx-default-box-padding);
      }
   }
}

// validation error
.#{$mod}help-placement-material {
   .#{$block}validationerror {
      position: absolute;
      left: 0;
      top: 105%;
      line-height: normal;
      display: none;
      color: $cx-theme-danger-color;
      font-size: 10px;
   }

   &.#{$state}focus:not(.#{$state}empty) > .#{$block}validationerror,
   &.#{$state}visited > .#{$block}validationerror {
      display: inline-block;
   }
}

@if (cx-included("cx/widgets/Calendar")) {
   // calendar
   .#{$block}calendar {
      .#{$element}calendar-day-names {
         background-color: $cx-theme-primary-color;
         color: #fff;
      }
   }
}

@if (cx-included("cx/widgets/Checkbox")) {
   .#{$element}checkbox-input {
      &:after {
         content: "";
         width: 2 * $cx-default-checkbox-size;
         height: 2 * $cx-default-checkbox-size;
         position: absolute;
         left: calc(50% - #{$cx-default-checkbox-size});
         bottom: calc(50% - #{$cx-default-checkbox-size});
         background-color: rgba(black, 0.05);
         border-radius: 50%;
         visibility: hidden;
         transform: scale(0.6, 0.6);
         transition: transform 0.2s ease-in-out;
      }
      &.#{$state}checked {
         &:after {
            background-color: rgba($cx-theme-primary-color, 0.1);
         }
      }
      &:focus:after {
         visibility: visible;
         transform: scale(0.9, 0.9);
      }
   }
}

@if (cx-included("cx/widgets/Radio")) {
   // radio focus effect
   .#{$element}radio-input {
      border-width: 2px;
      border-color: color.adjust(#dbdbdb, $lightness: -10%);
      color: $cx-theme-primary-color;

      &:after {
         content: "";
         width: 2 * $cx-default-radio-size;
         height: 2 * $cx-default-radio-size;
         position: absolute;
         left: calc(50% - #{$cx-default-radio-size});
         bottom: calc(50% - #{$cx-default-radio-size});
         background-color: rgba(black, 0.05);
         border-radius: 50%;
         visibility: hidden;
         transform: scale(0.6, 0.6);
         transition: transform 0.2s ease-in-out;
      }

      &:hover {
         border-color: color.adjust(#dbdbdb, $lightness: -10%);
      }

      &.#{$state}checked {
         &:after {
            background-color: rgba($cx-theme-primary-color, 0.1);
         }
      }

      &:focus:after {
         visibility: visible;
         transform: scale(0.9, 0.9);
      }
   }
}

@if (cx-included("cx/widgets/ColorPicker")) {
   // colorpicker
   .#{$block}colorpicker {
      input {
         line-height: $cx-default-box-line-height - 8px;
         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 6px;

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

@if (cx-included("cx/widgets/Slider")) {
   // slider focus effect
   .#{$element}slider-handle {
      &:after {
         content: "";
         width: 1.5 * $cx-default-slider-handle-size;
         height: 1.5 * $cx-default-slider-handle-size;
         position: absolute;
         left: calc(50% - 0.75 * #{$cx-default-slider-handle-size});
         bottom: calc(50% - 0.75 * #{$cx-default-slider-handle-size});
         background-color: rgba(black, 0.05);
         border-radius: 50%;
         visibility: hidden;
         transform: scale(0.6, 0.6);
         transition: transform 0.15s ease-out, background-color 0.15s ease-out;
      }

      &:active,
      &:active:focus {
         &:after {
            visibility: visible;
            transform: scale(1, 1);
            background-color: inherit;
         }
      }
      &:focus:after {
         visibility: visible;
         transform: scale(1.4, 1.4);
         background-color: rgba($cx-theme-primary-color-dark, 0.1);
      }
   }

   .#{$element}slider-handle[style*="left: 0%;"] {
      background-color: #fff;
      border-color: rgba(0, 0, 0, 0.26);

      &:focus:after {
         background-color: rgba(0, 0, 0, 0.05);
      }
      &:active {
         background-color: inherit;
      }
   }
}

@if (cx-included("cx/widgets/Switch")) {
   // switch focus effect
   .#{$element}switch-handle {
      &:after {
         content: "";
         width: 1.5 * $cx-default-slider-handle-size;
         height: 1.5 * $cx-default-slider-handle-size;
         position: absolute;
         left: calc(50% - 0.75 * #{$cx-default-slider-handle-size});
         bottom: calc(50% - 0.75 * #{$cx-default-slider-handle-size});
         background-color: rgba(black, 0.05);
         border-radius: 50%;
         visibility: hidden;
         transform: scale(0.6, 0.6);
         transition: transform 0.15s ease-out, background-color 0.15s ease-out;
      }
   }

   .#{$block}switch:focus {
      .#{$element}switch-handle {
         &:after {
            visibility: visible;
            transform: scale(1.4, 1.4);
            background-color: rgba($cx-theme-primary-color, 0.1);
         }
      }
   }
}

@if (cx-included("cx/widgets/Tab")) {
   //TAB
   div.#{$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")) {
   @keyframes cx-theme-window-appear-animation {
      from {
         opacity: 0;
         transform: scale(0.3);
      }

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

   //WINDOW
   // window animation
   .#{$block}window {
      //transition: opacity .2s, transform .2s;

      &.#{$state}animate {
         animation: cx-theme-window-appear-animation 0.2s;
         //transition: opacity .3s, transform .3s;
      }
   }

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

      &.#{$state}animate-enter {
         opacity: 1;
      }
   }
}

//PROGRESSBAR
@if (cx-included("cx/widgets/ProgressBar")) {
   .#{$block}progressbar {
      margin: 12px 0 0;

      .#{$element}progressbar-label {
         top: -12px;
         text-align: left;
      }
   }
}

//MENU
.#{$block}menu {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

// menu focus animation
.#{$block}menuitem {
   &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.1);
      opacity: 1;
      border-radius: $cx-default-border-radius;
      pointer-events: none;
      transform: scaleX(0);
      transform-origin: left;
   }
}

.#{$state}focusable.#{$state}cursor > .#{$block}menuitem.#{$state}cursor {
   background-color: transparent;

   &:before {
      transform: scaleX(1);
      transition: transform 0.25s;
      background-color: rgba(0, 0, 0, 0.1);
   }
}

.#{$state}focusable > .#{$block}menuitem.#{$state}cursor:hover {
   // there wasn't any effect on menu hover with bg set to transparent
   //background-color: transparent;
}

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

//GRID
.#{$block}grid.#{$state}scrollable {
   // border removed from a first row of grid with fixed header
   .#{$element}grid-header {
      + .#{$element}grid-data,
      + .#{$element}grid-group-caption {
         td {
            border-top-color: transparent;
         }
      }
   }
}

.#{$element}grid-fixed-header {
   // shadow added to fixed header
   box-shadow: $cx-default-grid-header-box-shadow;

   .#{$element}grid-col-header {
      border-color: #fff;
   }

   .#{$state}sorted-asc,
   .#{$state}sorted-desc {
      border-color: color.adjust($cx-default-grid-header-background-color, $lightness: -2%);
      &:hover {
         border-color: color.adjust($cx-default-grid-header-background-color, $lightness: -3%);
      }
   }
}

.#{$element}grid-header {
   // if a grid header has two or more rows
   tr:not(:first-child) .#{$element}grid-col-header {
      border-top: 1px solid $cx-default-grid-data-border-color;
   }
}

// grid header border removed
.#{$state}border {
   .#{$element}grid-col-header {
      border-width: 0;
   }
}

.#{$state}header-plain.#{$state}border {
   .#{$element}grid-col-header:last-child {
      border-width: 0 1px 0 0;
      border-style: solid;
      border-color: $cx-default-grid-border-color;
   }
}

//grid header tool icon
.#{$element}grid-col-header-tool {
   > .#{$block}menu > li > div {
      > span {
         padding: 0 $cx-theme-base-size * 0.5 !important;
         line-height: $cx-default-grid-header-line-height + 2 * (cx-top($cx-default-grid-header-padding) - 1px); //temporary solution TODO
      }
   }
}

// group grid styles
.#{$element}grid-group-footer,
.#{$element}grid-group-caption {
   td {
      color: $cx-theme-primary-color;
      line-height: $cx-default-grid-data-line-height;
      border-top: 1px solid $cx-default-grid-data-border-color;
      font-weight: 500;
   }

   &:not(:first-child) {
      td {
         padding-top: cx-top($cx-default-grid-data-padding) + 1px;
      }
   }
}

// 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;
}

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

   &.#{$mod}dropdown > .#{$element}list-item {
      border-bottom-color: transparent;
   }
}

//RIPPLE EFFECT
.#{$block}button,
.#{$block}tab {
   overflow: hidden;

   &:before {
      content: "";
      position: absolute;
      top: calc(50% - 3px);
      left: calc(50% - 3px);
      width: 6px;
      height: 6px;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      border-radius: 100%;
      transform: scale(18, 18);
      transition: transform 0.3s, opacity 0.8s;
      pointer-events: none;
   }

   &.cxm-float:before {
      transform: scale(9, 9);
   }

   &:active:before {
      transform: scale(0, 0);
      opacity: 0.2;
      transition: 0s;
   }
}

//MATERIAL ICONS
.material-icons {
   font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
   font-size: $cx-default-box-line-height; // Preferred icon size
   display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;

   // Support for all WebKit browsers.
   -webkit-font-smoothing: antialiased;
   // Support for Safari and Chrome.
   text-rendering: optimizeLegibility;

   // Support for Firefox.
   -moz-osx-font-smoothing: grayscale;

   // Support for IE.
   font-feature-settings: "liga";

   user-select: none;
}