@import "./default.less";

@font-family: "Roboto", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

@heading-color-dark: fade(#fff, 100%);
@text-color-dark: fade(#fff, 85%);
@text-color-secondary-dark: fade(#fff, 65%);
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 12px;
@line-height-base: 1.3;
@border-radius-xxl: 30px;
@border-radius-circle: 50%;

// Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 91%); // split border inside a component
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border
@border-radius-base: 8px;
@border-radius-sm: 4px;
@border-radius-lg: 10px;

// LINK
@link-color: @info-color;
@link-hover-color: color(~`colorPalette("@{link-color}", 5) `);
@link-active-color: color(~`colorPalette("@{link-color}", 7) `);

@h1-font-size: 22px;
@h2-font-size: 20px;
@h3-font-size: 18px;
@h4-font-size: 16px;
@h5-font-size: 14px;
@h6-font-size: 12px;

@headings-font-weight: 400;
@headings-line-height: 1.2;

@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-semi-bold: 600;
@font-weight-bold: 700;
@font-weight-heavy: 900;

// Sidebar Variables
@sidebar-width: 280px;
@sidebar-mini-drawer-width: 80px;
@sidebar-padding-lr: 30px;

@sidebar-hover-color: @primary-color;

// Dark Sidebar Variables
@sidebar-dark-hover-color: @white;

// Menu
// ---
@menu-inline-toplevel-item-height: 42px;
@menu-item-height: 42px;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-group-title-color: #545454;
@menu-highlight-dot-color: @pink-5;

// Layout
@layout-body-background: @body-background;
@layout-header-height: 58px;
@layout-header-height-res: 50px;
@layout-header-padding: 0 32px;
@layout-header-padding-res: 0 15px;
@layout-footer-padding: 14px 32px;
@layout-footer-padding-res: 14px 15px;
@layout-trigger-height: 30px;
@layout-trigger-background: #002140;
@layout-trigger-color: @white;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 28px;
@layout-main-content-padding: 32px;
@layout-main-content-padding-res: 15px;

// Card
// ---
@card-head-color: @heading-color;
@card-head-background: @component-background;
@card-head-padding: 16px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-padding-wider: 24px;
@card-actions-background: @background-color-light;
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);

@gx-card-padding-base: 24px;
@gx-card-padding-sm: @gx-card-padding-base - 10px;
@gx-card-shadow: 0 0 5px 5px fade(@black, 01%);
@gx-card-shadow-lg: 0 0 4px 4px fade(@black, 08%);
@gx-card-shadow-md: 0 0 5px 5px fade(@black, 05%);
@gx-card-margin-base: 32px;
@gx-card-margin-base-res: 20px;

// Gutter
@grid-gutter-width: 32px;

//Sizes Variables
@size-8: 8px;
@size-10: 10px;
@size-20: 20px;
@size-30: 30px;
@size-36: 36px;
@size-40: 40px;
@size-50: 50px;
@size-60: 60px;
@size-80: 80px;
@size-100: 100px;
@size-120: 120px;
@size-150: 150px;
@size-175: 175px;
@size-200: 200px;

//latter Spacing variables
@letter-spacing-base: 3px;
@letter-spacing-lg: 6px;
@letter-spacing-xl: 8px;

// Apps Variables
@app-sidebar-width: 230px;
@app-chat-sidebar-width: 315px;

// Form
// ---
@label-required-color: @highlight-color;
@label-color: @heading-color;
@form-item-margin-bottom: 20px;
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 8px;
@form-vertical-label-margin: 0;

// Input
// ---
@input-height-base: 36px;
@input-height-lg: 40px;
@input-height-sm: 24px;
@input-height-base-sm: 28px;

// Buttons
@btn-height-base: 36px;
@btn-height-lg: 40px;
@btn-height-sm: 24px;
@btn-height-base-sm: 28px;
@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-sm;
@btn-font-size-xs: @font-size-sm - 2px;
@btn-padding-xs: 0 6px;
@btn-border-radius-base: @border-radius-sm;
@btn-border-radius-sm: @border-radius-sm;
@btn-padding-base: 0 15px;
@btn-padding-lg: @btn-padding-base;
@btn-padding-sm: 0 7px;

// Dragndrop
@dragndrop-paddding-tb: 24px;
@dragndrop-paddding-lr: 16px;

//Pricing Table
@gx-pricing-table-base: 30px;

// Customizer
@gx-customizer-width: 370px;
@gx-customizer-base: 20px;

//Framed Layout
@framed-layout-base: 20px;

/// CAF-REACT

// CAF-LOADER Simble
.custom-caf-loader {
  min-height: auto !important;
}
.custom-caf-loader svg #gradient stop:first-child {
  stop-color: var(--color-caf-primary) !important;
}
.custom-caf-loader svg #gradient stop:last-child {
  stop-color: var(--color-caf-primary-light) !important;
}

/// ANTD

// INPUT
.ant-input-prefix {
  margin-right: 10px;
}
.ant-input-affix-wrapper-disabled {
  background-color: white !important;
}
.ant-input-affix-wrapper.uppercase .ant-input {
  text-transform: uppercase !important;
}
.ant-input-affix-wrapper.uppercase .ant-input::-webkit-input-placeholder {
  text-transform: none !important;
}
.ant-input-affix-wrapper.uppercase .ant-input::placeholder {
  text-transform: none !important;
}
.ant-input-affix-wrapper.uppercase .ant-input::-moz-placeholder {
  text-transform: none !important;
}
.ant-input-affix-wrapper.uppercase .ant-input::-moz-placeholder {
  text-transform: none !important;
}
.ant-input-affix-wrapper.uppercase .ant-input::-ms-input-placeholder {
  text-transform: none !important;
}
// SELECT
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
.ant-input[disabled] {
  background-color: white !important;
}
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}
// CHECKBOX
.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--color-secondary);
}
.ant-checkbox-checked::after {
  border: none;
}
.ant-checkbox-checked .ant-checkbox-inner {
  border-color: var(--color-caf-primary);
}

// BUTTON
.ant-btn .ant-btn-loading-icon .anticon.anticon-loading {
  display: block;
}
// SWITCH
.ant-switch.ant-switch-small .ant-switch-handle {
  top: 1px;
}
// UPLOAD
.ant-upload.ant-upload-select.ant-upload-select-text {
  width: 100%;
}
// RADIO
.ant-radio-inner {
  border: none;
  margin-right: 10px;
}
// INPUT ARROW (was showing the arrow incorrectly)
.ant-popover-arrow {
  border-color: transparent !important;
  overflow: visible;
}
// PAGINATION
.ant-pagination {
  display: flex;
  justify-content: center;
  width: 100%;

  .ant-pagination-total-text {
    flex: 1;
    font-weight: 300;
  }

  .ant-pagination-item-ellipsis {
    font-size: 12px;
  }

  .ant-pagination-prev,
  .ant-pagination-next {
    .ant-pagination-item-link {
      border-radius: 50%;
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.ant-pagination-disabled {
      .ant-pagination-item-link {
        opacity: 0.3;
      }
    }

    &:not(.ant-pagination-disabled) {
      &:focus {
        .ant-pagination-item-link {
          color: inherit;
        }
      }

      &:hover {
        .ant-pagination-item-link {
          background-color: lighten(#e0e0e0, 5%);
          color: @text-color;
        }
      }
    }
  }

  .ant-pagination-item {
    border-radius: 50%;
    background: transparent;
    border: none;
    font-family: @font-family;
    font-weight: 300;
    margin-right: 6px;

    a {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.ant-pagination-item-active {
      background-color: var(--color-caf-primary) !important;

      a {
        color: #fff;
        cursor: default;
      }

      &:hover,
      &:focus {
        a {
          color: #fff;
        }
      }
    }

    &:focus {
      a {
        color: inherit;
      }
    }

    &:hover:not(.ant-pagination-item-active) {
      background-color: lighten(#e0e0e0, 5%);

      a {
        color: @text-color;
      }
    }
  }

  &.mini {
    .ant-pagination-item {
      &:not(.ant-pagination-item-active) {
        background-color: transparent;

        &:hover {
          a {
            color: var(--color-caf-primary) !important;
          }
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      .ant-pagination-item-link {
        background-color: transparent !important;
      }

      &:hover {
        .ant-pagination-item-link {
          color: var(--color-caf-primary) !important;
        }
      }
    }
  }
}

// VERIFICATION CODE INPUT
.verification-code-input {
  width: 100% !important;

  > div {
    display: flex !important;
    box-sizing: border-box !important;

    width: 100% !important;
  }

  input {
    &:not(:last-child) {
      margin-right: 5px;
    }
    width: 17% !important;
    border-radius: 12px !important;
    border-right: 1px solid !important;
    border-color: lightgray !important;
  }
}
// ONLY INSIDE ONBOARDING CONTAINER
#onboarding-container {
  // SELECT
  .ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
  .ant-input[disabled] {
    background-color: white !important;
  }
  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-light) !important;
  }
  .ant-select-single:not(.ant-select-customize-input) {
    .ant-select-selector {
      padding-top: 0.75rem !important;
      padding-bottom: 0.75rem !important;
      height: 52px;

      .ant-select-selection-search-input {
        height: 52px;
      }
    }
    &:not(.no-icon) {
      .ant-select-selector {
        padding-left: 50px;

        .ant-select-selection-search-input {
          padding-left: 39px;
        }
      }
    }
  }

  .ant-btn.button-document-type {
    height: inherit;
    display: inherit;
  }

  .button-component-icon {
    height: inherit;
    width: inherit;
    display: inline-block;
  }

  @dot-size: 8px;
  .slick-dots-rounded li button {
    width: @dot-size !important;
    height: @dot-size !important;
    border-radius: 100% !important;
  }
  .slick-dots-rounded li.slick-active {
    width: 16px !important;

    button {
      width: @dot-size !important;
      height: @dot-size !important;
      border-radius: 100% !important;
    }
  }
}

// SIDEBAR, MODAL AND POPOVER COLORS
#sidebar,
#topbar,
.sidebar,
.ant-popover,
.ant-select-dropdown,
.modal,
.caf-components {
  font-family: "Roboto", sans-serif !important;

  // BUTTON
  .ant-btn {
    font-weight: bold;
    border-radius: 1.5rem;

    &.ant-btn-primary {
      &:not(:disabled) {
        background-color: var(--color-caf-primary);

        &.ant-btn-background-ghost {
          border-color: var(--color-caf-primary);
          border-width: 1px;
          color: var(--color-caf-primary) !important;
          background-color: transparent;

          &:hover {
            background-color: var(--color-caf-primary) !important;
            border-color: var(--color-caf-primary) !important;
            color: #fff !important;
          }
        }

        &.ant-btn-sm {
          font-size: 14px;
        }

        &:hover,
        &:focus {
          color: white;
          border-color: var(--color-caf-primary-dark);
          background-color: var(--color-caf-primary-dark) !important;
        }
        &:active {
          color: white;
          border-color: var(--color-caf-primary-dark);
          background-color: var(--color-caf-primary-dark) !important;
        }
      }
    }

    &.ant-btn-icon-only {
      vertical-align: 0;
    }

    &.ant-btn-dashed,
    &.ant-btn-text {
      &:not(:disabled) {
        &:hover,
        &:focus {
          color: var(--color-caf-primary);
          border-color: var(--color-caf-primary);
        }
        &:active {
          color: var(--color-caf-primary-dark);
          border-color: var(--color-caf-primary);
        }
      }
    }

    &.ant-btn-link {
      color: var(--color-caf-primary);
      &:not(:disabled) {
        &:hover,
        &:focus {
          color: var(--color-caf-primary-dark);
        }
        &:active {
          color: var(--color-caf-primary-dark);
        }
      }
    }

    &:disabled,
    &.disabled {
      color: rgba(0, 0, 0, 0.25) !important;
    }
  }
  // SWITCH
  .ant-switch-checked {
    background-color: var(--color-caf-primary);
    padding-bottom: 6px;
  }
  // INPUT
  .ant-input:not(.ant-input-borderless),
  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-borderless) {
    border-radius: 8px;

    &:hover,
    &:focus,
    &:focus-within {
      border-color: var(--color-caf-primary);
    }
    &:focus,
    &:focus-within {
      box-shadow: 0 0 0 2px var(--color-caf-primary-shadow);
    }
  }
  .ant-input-affix-wrapper {
    .ant-input {
      border: none !important;
      box-shadow: none !important;
    }
  }
  .ant-input-affix-wrapper.ant-input-affix-wrapper-borderless {
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #e5e7eb;

    &:hover,
    &:focus,
    &:focus-within {
      box-shadow: none;
      border-color: var(--color-caf-primary);
    }

    .ant-input.ant-input-borderless {
      border-radius: 0px;
    }

    &.text-base {
      .ant-input.ant-input-borderless {
        font-size: 1rem;
      }
    }
  }
  // SELECT
  .ant-select {
    .ant-select-selector {
      border-radius: 8px;
    }
    &:not(.ant-select-disabled):hover .ant-select-selector {
      border-color: var(--color-caf-primary);
    }
  }
  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border-color: var(--color-caf-primary);
    box-shadow: 0 0 0 2px var(--color-caf-primary-shadow);
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    color: var(--color-caf-primary);
  }
  // TAB LIST
  .ant-tabs {
    &.ant-tabs-left {
      .ant-tabs-tab {
        padding: 8px 12px;
      }

      .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
        padding-left: 0;
      }
    }
    .ant-tabs-nav-list {
      .ant-tabs-ink-bar {
        background-color: var(--color-caf-primary);
      }
      .ant-tabs-tab {
        .ant-tabs-tab-btn {
          color: #adadad;
          font-weight: bold;
          font-size: 16px;
        }
        &.ant-tabs-tab-active {
          .ant-tabs-tab-btn {
            color: #575757;
          }
        }
      }
    }
    .ant-tabs-content-holder {
      overflow-y: auto;
    }
    height: 100%;
  }
  // UPLOAD
  .ant-upload {
    width: 100%;
    position: relative;

    &.ant-upload-select-picture-card {
      width: 82px;
      height: 82px;
      padding: 1px;
      border-radius: 0.5rem;
      overflow: hidden;

      &:hover,
      &:focus,
      &:active {
        border-color: var(--color-caf-primary);
      }
    }
  }
}

.ant-input {
  background-color: transparent !important;
}