web-map/src/_ant.scss

@use 'asset/themes/theme' as *;

@include themed {
  .ant-app {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .ant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 400 14px/22px Roboto;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: none !important;

    &.ant-btn-lg {
      padding-block: 8px;
      border-radius: 4px;
    }

    &.ant-btn-default {
      color: get-color(primary);
      background-color: get-color(neutral1);
      border-color: get-color(primary);
    }

    &.ant-btn-dashed {
      font-weight: 500;
      color: get-color(primary_text-active);
      background-color: get-color(info_bg);
      border-color: get-color(primary_border);
    }

    &.ant-btn-primary {
      font-weight: 500;
      color: get-color(text1-inverse);
      background-color: get-color(primary);
      border-color: get-color(primary);
    }

    &.warning {
      font-weight: 500;
      color: get-color(text1-inverse);
      background-color: get-color(warning);
      border-color: get-color(warning);
    }

    &.icon-btn {
      background-color: transparent;
      border: none;

      &.ant-btn-sm {
        padding: 0;
      }

      &.ant-btn-lg {
        padding: 8px;
        border-radius: 8px;
      }
    }
  }

  .ant-card {
    background-color: get-color(sider_bg2);
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 get-color(shadow1);

    & > .ant-card-head {
      min-height: 48px;
      padding: 14px 16px;
      margin: 0;
      font: 500 16px/20px Roboto;
      color: get-color(text1);
      background-color: get-color(fill1);
      border: none;
    }

    & > .ant-card-body {
      max-height: calc(100% - 48px);
      padding: 16px;
      overflow-y: auto;
    }
  }

  .ant-checkbox {
    &::after {
      display: none;
    }

    & > .ant-checkbox-inner {
      background-color: get-color(neutral1);
      border-color: get-color(neutral5);
      border-radius: 2px;
    }

    &.ant-checkbox-checked:not(.ant-checkbox-disabled) > .ant-checkbox-inner {
      background-color: get-color(primary);
      border-color: get-color(primary);

      &::after {
        border-color: get-color(neutral1);
      }
    }

    &.ant-checkbox-indeterminate:not(.ant-checkbox-disabled) > .ant-checkbox-inner {
      &::after {
        background-color: get-color(primary);
      }
    }
  }

  .ant-checkbox-wrapper {
    align-items: center;
    font: 400 14px/22px Roboto;
    color: get-color(text2);
    vertical-align: top;
  }

  .ant-collapse {
    background-color: transparent;
    border-radius: 0;

    & > .ant-collapse-item {
      border: none;

      & > .ant-collapse-header {
        gap: 8px;
        align-items: center;
        height: 36px;
        padding: 0;
        font: 500 14px/22px Roboto;
        color: get-color(text1);
        border-radius: 2px;

        & > .ant-collapse-header-text {
          padding-inline: 8px;
        }

        & > .ant-collapse-expand-icon {
          width: 24px;
          height: 24px;
          padding: 0;

          & > .ant-collapse-arrow {
            font-size: 24px;

            &.active {
              transform: rotate(180deg);
            }
          }
        }
      }

      & > .ant-collapse-content {
        & > .ant-collapse-content-box {
          padding: 0;
        }
      }
    }

    &.ant-collapse-borderless > .ant-collapse-item {
      & > .ant-collapse-header {
        background: get-color(neutral3);
      }

      & + .ant-collapse-item {
        margin-block-start: 24px;
      }
    }

    &.ant-collapse-ghost > .ant-collapse-item {
      & > .ant-collapse-header {
        background: get-color(fill3);
      }

      & + .ant-collapse-item {
        margin-block-start: 8px;
      }
    }
  }

  .ant-divider {
    border-color: get-color(border1);

    &.ant-divider-vertical {
      height: 1em;
    }
  }

  .ant-dropdown-menu-root {
    padding: 0;
    overflow: hidden;
    background-color: get-color(neutral9);
    border-radius: 4px;
    box-shadow: 0 2px 8px 0 get-color(shadow2);

    & > .ant-dropdown-menu-item {
      padding: 8px 16px;
      font: 400 14px/16px Roboto;
      color: get-color(text1-inverse);
      border-radius: 0;

      &:hover {
        background-color: get-color(neutral8);
      }
    }
  }

  .ant-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;

    & > .ant-empty-image {
      height: 40px;
      margin: 0;
    }

    & > .ant-empty-description {
      margin: 0;
      font: 400 14px/22px Roboto;
      color: get-color(text4);
    }
  }

  .ant-flex {
    & > * {
      flex: none;
    }
  }

  .ant-float-btn {
    height: fit-content;
    overflow: hidden;
    background-color: transparent;
    box-shadow: none !important;

    &.ant-float-btn-square > .ant-badge > .ant-float-btn-body {
      background-color: get-color(sider_bg2);
      border-radius: 4px;
      box-shadow: 0 1px 2px 0 get-color(shadow1);

      & > .ant-float-btn-content {
        padding: 0;

        & > .ant-float-btn-icon {
          width: auto;
          height: auto;
          margin: 0;
        }
      }
    }

    &:hover > .ant-badge > .ant-float-btn-body {
      background-color: get-color(fill1);
    }
  }

  .ant-form {
    & > .ant-form-item {
      margin-block-end: 8px;

      & > .ant-form-item-row {
        justify-content: flex-end;
      }

      .ant-form-item-label {
        font: 400 14px/22px Roboto;
        color: get-color(text1);

        & > .ant-form-item-required::before {
          color: get-color(error);
        }
      }

      .ant-form-item-control {
        max-width: 292px;
      }
    }
  }

  .ant-input {
    color: get-color(text1);
    background-color: get-color(neutral1);
    border-color: get-color(neutral5);
    border-radius: 2px;
    box-shadow: none !important;

    &.ant-input-status-error {
      border-color: get-color(error) !important;
      outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
    }

    &:disabled {
      background-color: get-color(neutral3);
    }

    &:not(:disabled):focus {
      border-color: get-color(primary);
      outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
      transition: none;
    }

    &::placeholder {
      color: get-color(text4);
    }
  }

  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-borderless) {
    border-radius: 2px;
    box-shadow: none !important;

    &.ant-input-affix-wrapper-status-error {
      border-color: get-color(error) !important;
      outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
    }

    &:not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper-focused {
      border-color: get-color(primary);
      outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
      transition: none;
    }

    &::before {
      display: none;
    }

    & > .ant-input {
      background-color: transparent;
      outline: none;
    }

    & > .ant-input-suffix {
      margin-inline-start: 12px;
      font-size: 16px;
      color: get-color(icon);
    }

    &.search {
      padding-inline-start: 7px;
      background-color: get-color(fill3);
      border-color: get-color(border2);

      & > .ant-input-suffix {
        color: get-color(icon-disabled);
      }
    }
  }

  .ant-input-number {
    width: 100%;
    color: get-color(text1);
    background-color: get-color(neutral1);
    border-color: get-color(neutral5);
    border-radius: 2px;
    box-shadow: none !important;

    &.ant-input-number-status-error {
      border-color: get-color(error) !important;
      outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
    }

    &:not(:disabled).ant-input-number-focused {
      border-color: get-color(primary);
      outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
      transition: none;
    }
  }

  .ant-layout {
    background-color: get-color(page_bg);

    & > .ant-layout-header {
      z-index: 10;
      line-height: unset;
      background-color: get-color(sider_bg);
      box-shadow: 0 2px 8px 0 get-color(shadow2);
    }

    & > .ant-layout-sider {
      z-index: 20;
      background-color: get-color(sider_bg2);
      border-radius: 8px;
      box-shadow: 0 2px 8px 0 get-color(shadow1);
    }
  }

  .ant-list-items {
    & > .ant-list-item {
      padding: 0;
      border-color: get-color(item_bg-hover);

      &:hover {
        background-color: get-color(item_bg-hover);
      }

      &.selected {
        background-color: get-color(primary_bg);
      }
    }
  }

  .ant-list.block .ant-list-item {
    padding: 12px;
    background-color: get-color(fill4);
    border: none;
    border-radius: 4px;

    &:not(:first-child) {
      margin-block-start: 8px;
    }
  }

  .ant-modal.ant-modal-confirm .ant-modal-content {
    padding: 32px 32px 24px;
    background-color: get-color(popover);
    border-radius: 2px;
    box-shadow: none !important;

    & > .ant-modal-body > .ant-modal-confirm-body-wrapper {
      & > .ant-modal-confirm-body {
        & > .anticon {
          margin-inline-end: 16px;
          color: get-color(warning);
        }

        & > .ant-modal-confirm-title {
          font: 500 16px/24px Roboto;
          color: get-color(text1);
        }

        & > .ant-modal-confirm-content {
          margin: 0;
        }
      }

      & > .ant-modal-confirm-btns {
        margin-block-start: 24px;
      }
    }
  }

  .ant-modal:not(.ant-modal-confirm) .ant-modal-content {
    padding: 0;
    background-color: get-color(popover);
    border-radius: 2px;
    box-shadow: none !important;

    & > .ant-modal-close {
      inset: 17px 16px 17px auto;
      width: 1em;
      height: 1em;
      font-size: 16px;
      color: get-color(text3);
      background-color: transparent;

      & > .ant-modal-close-x {
        width: 1em;
        height: 1em;
        line-height: 1;
      }
    }

    & > .ant-modal-header {
      padding: 14px 16px;
      margin: 0;
      background-color: get-color(bg_layout);
      border-radius: 2px 2px 0 0;

      & > .ant-modal-title {
        font: 500 16px/22px Roboto;
        color: get-color(text1);
      }
    }

    & > .ant-modal-body {
      padding: 24px 16px;
    }

    & > .ant-modal-footer {
      padding: 16px;
      margin: 0;
      border-block-start: 1px solid get-color(border2);
    }
  }

  .ant-modal-mask {
    background-color: get-color(mask);
  }

  .ant-select:not(.ant-select-borderless) {
    width: 100%;

    & > .ant-select-selector {
      color: get-color(text1);
      background-color: get-color(neutral1);
      border-color: get-color(neutral5);
      border-radius: 2px;
      box-shadow: none !important;

      & > .ant-select-selection-item {
        color: inherit;
      }

      & > .ant-select-selection-placeholder {
        color: get-color(text4);
      }
    }

    &.ant-select-disabled > .ant-select-selector {
      color: get-color(text4);
      background-color: get-color(fill3);
    }

    &.ant-select-status-error > .ant-select-selector {
      border-color: get-color(error) !important;
      outline-color: rgba($color: get-color(error), $alpha: 20%) !important;
    }

    &:not(.ant-select-disabled):hover > .ant-select-selector {
      border-color: get-color(neutral5);
    }

    &:not(.ant-select-disabled).ant-select-focused > .ant-select-selector {
      border-color: get-color(primary);
      outline: 2px solid rgba($color: get-color(primary), $alpha: 20%);
      transition: none;
    }

    & > .ant-select-arrow {
      color: get-color(icon-disabled);
    }
  }

  .ant-select-dropdown {
    padding: 4px 0;
    background-color: get-color(popover);
    border-radius: 2px;
    box-shadow: 0 0 4px 0 get-color(shadow1);

    .ant-select-item {
      font: 400 14px/22px Roboto;
      color: get-color(text1);
      background-color: transparent;
      border-radius: 0;

      &.ant-select-item-option-selected {
        background-color: get-color(fill1);
      }

      &:not(.ant-select-item-option-disabled):hover {
        background-color: get-color(item_bg-hover);
      }
    }
  }

  .ant-table.ant-table-bordered {
    background-color: transparent;
    border-radius: 0;

    & > .ant-table-container {
      border-color: get-color(divider);
      border-radius: 0;

      & > .ant-table-header {
        border-radius: 0;

        & > table {
          border-color: get-color(divider);
          border-radius: 0;

          & > .ant-table-thead > tr > .ant-table-cell {
            padding: 9px 16px 8px;
            font: 500 14px/22px Roboto;
            color: get-color(text3);
            background-color: get-color(neutral3);
            border-color: get-color(divider);
            border-radius: 0;
          }
        }
      }

      & > .ant-table-body {
        & > table {
          & > .ant-table-tbody > .ant-table-row > .ant-table-cell {
            padding: 9px 16px 8px;
            font: 400 14px/22px Roboto;
            color: get-color(text1);
            background-color: transparent;
            border-color: get-color(divider);
          }
        }
      }

      & > .ant-table-header > table > .ant-table-thead > tr > .ant-table-cell.ant-table-selection-column,
      & > .ant-table-body > table > .ant-table-tbody > .ant-table-row > .ant-table-cell.ant-table-selection-column {
        padding: 0;
      }

      & > .ant-table-body > table > .ant-table-tbody > .ant-table-placeholder > .ant-table-cell {
        padding: 8px 0 0;
        background-color: transparent;
        border-color: get-color(divider);
      }
    }
  }

  .ant-tabs {
    height: 100%;
    overflow: hidden;
    border-radius: 8px;

    & > .ant-tabs-nav {
      margin: 0;
      background-color: get-color(fill1);

      &::before {
        display: none;
      }

      & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
        & > .ant-tabs-tab {
          padding: 14px 32px;
          margin: 0;
          font: 400 16px/20px Roboto;
          color: get-color(text3);
          background-color: transparent;
          border: none;
          border-radius: 0;

          & > .ant-tabs-tab-btn {
            color: inherit;
            text-shadow: none;
          }

          &.ant-tabs-tab-active {
            font-weight: 600;
            color: get-color(primary);
            background-color: get-color(sider_bg2);
          }
        }

        & > .ant-tabs-ink-bar {
          display: none;
        }
      }

      & > .ant-tabs-nav-operations {
        display: none;
      }
    }

    & > .ant-tabs-content-holder > .ant-tabs-content {
      height: 100%;
      padding: 16px;
      overflow-y: auto;
    }
  }

  .ant-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    margin: 0;
    font: 500 14px/22px Roboto;
    color: get-color(text1);
    vertical-align: top;
    background-color: transparent;
    border-color: get-color(border1);
    border-radius: 4px;
    box-shadow: none !important;

    &.ant-tag-borderless {
      padding: 4px 8px;
      font: 400 14px/16px Roboto;
      color: get-color(text2);
      background-color: get-color(fill3);
      border: none;
    }
  }

  .ant-typography {
    font: 500 16px/22px Roboto;
    color: get-color(text1);

    &.ant-typography-secondary {
      font: 400 14px/22px Roboto;
      color: get-color(text2);
    }

    &.ant-typography-disabled {
      font: 400 14px/22px Roboto;
      color: get-color(text4);
    }

    &.card-title {
      font-size: 20px;
      line-height: 28px;
    }

    & > strong {
      font: 500 16px/22px Roboto;
    }

    & > code {
      padding: 0;
      margin: 0;
      font: 400 14px/22px Roboto;
      color: get-color(text3);
      background-color: transparent;
      border: none;
    }
  }

  .toolbar {
    padding: 8px;
    background-color: get-color(sider_bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 get-color(shadow2);
  }
}