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

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

  .ant-btn {
    display: inline-flex;
    align-items: center;
    font: 400 14px/22px Roboto;
    border-radius: 2px;

    &.ant-btn-default {
      color: get-color(primary);
      background-color: get-color(141414);
      border-color: get-color(primary);
      box-shadow: 0 2px 0 0 get-color(00000005);
    }

    &.ant-btn-primary {
      font-weight: 500;
      color: get-color(141414);
      background-color: get-color(primary);
      border-color: get-color(primary);
      box-shadow: 0 2px 0 0 get-color(0000000a);
    }

    &.warning {
      font-weight: 500;
      color: get-color(141414);
      background-color: get-color(warning);
      border-color: get-color(warning);
      box-shadow: 0 2px 0 0 get-color(0000000a);
    }

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

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

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

    & > .ant-checkbox-inner {
      background-color: get-color(141414);
      border-color: get-color(434343);
      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(141414);
      }
    }
  }

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

  .ant-collapse.ant-collapse-ghost {
    border-radius: 0;

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

        & > .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-item {
        margin-block-start: 8px;
      }
    }
  }

  .ant-input {
    color: get-color(ffffffd9);
    background-color: transparent;

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

  .ant-input-affix-wrapper {
    box-shadow: none;

    &::before {
      display: none;
    }

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

    &.search {
      padding-inline-start: 7px;
      background-color: transparent;
      border-color: get-color(595959);
      border-radius: 4px;
    }
  }

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

    & > .ant-layout-header {
      line-height: unset;
      background-color: get-color(242525);
      box-shadow: 0 2px 8px 0 get-color(00000026);
    }

    & > .ant-layout-sider {
      background-color: get-color(36393a);
      border-radius: 8px;
      box-shadow: 0 2px 8px 0 get-color(ffffff14);
    }
  }

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

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

  .ant-tabs {
    border-radius: 8px;

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

      & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
        & > .ant-tabs-tab {
          padding: 14px 32px;
          margin: 0;
          font: 400 16px/20px Roboto;
          color: get-color(ffffff73);
          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(36393a);
          }
        }

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

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

  .ant-typography {
    font: 400 14px/22px Roboto;
    color: get-color(ffffffa6);

    & > strong {
      font: 500 16px/22px SourceHanSansSC;
      color: get-color(ffffffd9);
    }
  }
}