@use "./libs" as *;

:root {
  font-family: -apple-system, "PingFang SC", 'Microsoft YaHei', sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --main-bg-color: #f4f7fc;
  --brand-color: #43ABFF;
  --navigation-width: 100vw;
  --navigation-active-color: #ffe0e0;
  --app-header-header: 70px;
  --container-width: 1800px;
  --header-z-index: 99999;
  --message-z-index: 100001;
}

@tailwind base;
@tailwind components;
@tailwind utilities;


::-webkit-scrollbar {
  width: 4px;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(64, 150, 255, 0.5);
  height: 10px;
  border-radius: 5px;

  &:hover {
    background: rgba(64, 150, 255, 1);
    cursor: pointer;
  }
}

@layer base {
  .btn {
    @apply px-5 py-2 rounded-md bg-white border text-sm;
    &:hover {
      @apply bg-gray-100;
    }

    &.btn-primary {
      @apply bg-blue-500 text-white border-blue-500;
      &:hover {
        @apply bg-blue-600;
      }
    }
  }

  .card {
    @apply bg-white rounded-lg p-5 my-10;
  }

}

.radio-icon, .checkbox-icon {
  @apply w-4 h-4 mr-2 border border-gray-400 rounded-2xl inline-block flex items-center justify-center relative;
  padding: 3px;

  &:after {
    @apply inline-block bg-blue-500 w-full h-full;
    content: ' ';
    border-radius: 50%;
    opacity: 0;
  }
}

.checkbox-icon {
  @apply rounded;
  padding: 0;

  &:before {
    content: ' ';
    display: inline-block;
    border-left: solid 2px #fff;
    border-bottom: solid 2px #fff;
    height: 6px;
    width: 10px;
    position: absolute;
    transform: rotate(-45deg) translateY(-1px) translateX(1px);
    opacity: 0;
  }

  &:after {
    border-radius: 2px;
  }
}

.ant-select-item-option {
  &.ant-select-item-option-selected {
    .radio-icon, .checkbox-icon {
      @apply border-blue-500;
      &:after, &:before {
        opacity: 1;
      }
    }
  }
}

.select-hide-checked {
  .ant-select-item-option-selected {
    .ant-select-item-option-state {
      opacity: 0 !important;
    }
  }
}

.select-no-wrap {
  .ant-select-selector {
    .ant-select-selection-overflow {
      @apply flex flex-nowrap;
    }
  }
}

.simple-pagination {
  .ant-pagination-simple-pager {
    input[type=text] {
      width: auto;
      display: inline-block;
    }
  }
}

.page-live {
  .live-player {
    max-height: calc(100vh - var(--app-header-header) - 150px);
    overflow: hidden;

    iframe {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}

.video-item-shadow {
  box-shadow: 0 0 6px 0 var(--tw-shadow-color);
  //filter: drop-shadow(0 0 6px var(--tw-shadow-color));
}

.video-list-sort-container {
  .list-header {
  }

  .list-row {
    @apply flex bg-white mt-2 py-1 rounded-xl gap-2 border;
    border-width: 2px;
    &.playing{
      @apply border-primary-blue bg-[#d9eaff];
    }
    &.disabled{
      @apply border-primary-blue bg-[#f4f7fc];
    }
    &.header-row{
      @apply text-sm;
      background: none;
      .col{
        @apply text-sm text-gray-800;
        height: 42px;
      }
    }

    &.checked {
      @apply border-primary-blue bg-primary-blue-bg;
    }

    .col {
      @apply flex items-center relative pl-4 text-center justify-center;
      height: 60px;

      &:after {
        @apply absolute;
        border-right: solid 1px #e8e8e8;
        content: ' ';
        top: 2px;
        bottom: 2px;
        left: 0;
      }
    }

    .number {
      width: 70px;
      padding-left: 10px;
      &:after {
        display: none;
      }
    }

    .cover {
      width: 120px;
      img{
        @apply rounded-lg;
      }
    }

    .title {
      @apply flex-1 text-base;
    }

    .generated-time {
      width: 180px;
    }

    .operation {
      @apply  flex items-center ml-2 gap-4 text-lg text-gray-400 justify-center;
      width: 120px;
      padding: 0;
    }
  }
}

.live-video-list-sort-container {
  //min-height: 300px;
  //padding-right: 10px;
  //max-height: calc(100vh - var(--app-header-header) - 200px);
  //overflow: auto;
}
.root-modal-confirm{
  z-index: calc(var(--header-z-index) + 1) !important;
  background: rgba(0, 0, 0, 0.05);
  //anticon anticon-exclamation-circle
  .ant-modal-confirm-title{
    font-size: 20px;
    margin-top: -2px;
  }
  .ant-modal-confirm-content{
    margin-top: 10px;
    margin-left: -30px;
  }
  .icon-warning{

  }
  .ant-modal-confirm-btns{
    @apply mt-8;
    button{
      @apply rounded-2xl py-4 px-8;
    }
    .ant-btn-default{
      @apply bg-white shadow-none text-popconfirm-btn-cancel border border-popconfirm-btn-cancel hover:border-popconfirm-btn-cancel hover:text-popconfirm-btn-cancel hover:bg-white hover:bg-popconfirm-btn-cancel/10;
    }
    .ant-btn-primary{
      @apply bg-white shadow-none text-popconfirm-bg border border-popconfirm-bg hover:text-popconfirm-bg hover:bg-white hover:bg-popconfirm-btn-primary-hover/10;
    }
  }
}

.video-player {
  .video-js {
    @apply w-full h-full;
    max-width: 100%;
    max-height: 100%;
    background: #fff; // hsl(210, 100%, 48%)
  }
}

.app-main-navigation {
  @include media-breakpoint-down(md) {
    display: none;
  }
}

.page-action-to-top {
  @apply text-right;
  .btn-to-top {
    @apply w-[44px] h-[44px] inline-block bg-blue-300 text-center p-0 transition hover:bg-blue-500;
    min-width: 0;
    border-radius: 50px;
    font-size: 24px;
  }
}

.list-scroller-container {
  overflow: auto;
  margin-right: -20px;
  padding-right: 16px;
  scrollbar-gutter: stable;
}

.data-list-container {
  @apply list-scroller-container;
  height: calc(100vh - var(--app-header-header) - 200px);

  .data-list-container-inner {

  }
}
.video-history-list-container{
  height: calc(100vh - var(--app-header-header) - 130px);
}
.checkbox{
  @apply bg-black/10  backdrop-blur border border-white hover:border-blue-500 cursor-pointer relative;
  --size: 22px;
  border-width: 2px;
  width: var(--size);
  height: var(--size);
  border-radius: 2px;
  &::before {
    @apply absolute hidden;
    border-left:solid 2px white;
    border-bottom:solid 2px white;
    left: 3px;
    top: 4px;
    content: ' ';
    width: calc(var(--size) - 8px);
    height: 6px;
    transform: rotate(-45deg);
  }
  &.checked{
    @apply border-blue-500 bg-blue-500;
    &:before{
      @apply block;
    }
  }
}
// override antd style
.data-list-load-spin{
  .ant-spin-container::after{
    opacity: 0;
  }
}
.popconfirm-main{
  .ant-popover-inner{
    @apply bg-white px-6 py-6 rounded-xl;
    min-width: 360px;
    box-shadow: 0 0 10px rgba(25, 25, 25, 0.1);
  }
  .icon-warning{
    @apply text-red-500;
    font-size: 20px;
    transform: translateY(5px);
    margin-right: 10px;
  }
  .ant-popconfirm-message{
    .ant-popconfirm-title{
      @apply text-xl font-bold;
    }
    .ant-popconfirm-description{
      @apply mt-4 text-gray-400 text-sm;
      margin-left: -30px;
    }
  }
  .ant-popconfirm-buttons{
    @apply mt-8;
    button{
      @apply rounded-2xl py-4 px-8;
    }
    .ant-btn-default{
      @apply bg-white shadow-none text-popconfirm-btn-cancel border border-popconfirm-btn-cancel hover:border-popconfirm-btn-cancel hover:text-popconfirm-btn-cancel hover:bg-white hover:bg-popconfirm-btn-cancel/10;
    }
    .ant-btn-primary{
      @apply bg-white shadow-none text-popconfirm-bg border border-popconfirm-bg hover:text-popconfirm-bg hover:bg-white hover:bg-popconfirm-btn-primary-hover/10;
    }
  }
}
.ant-checkbox {
  border-radius: 2px;

  .ant-checkbox-inner {
    border-radius: 2px;
    width: 18px;
    height: 18px;

    &:after {
      //inset-inline-start: 28%;
    }
  }
}

.ant-message {
  z-index: var(--message-z-index);
}

.ant-modal-root {
  .ant-modal-mask {
    @apply bg-black/20;
    backdrop-filter: blur(7px);
  }

  .ant-modal {
    .ant-modal-content {
      background: #f2f2f2;
    }

    .ant-modal-body {
      padding: 10px 0;
    }

    .ant-modal-confirm-content {
      color: #999;
    }

    .ant-modal-confirm-btns {
      margin-top: 40px;
    }
  }
}

.article-edit-modal {

  .ant-modal {
    .ant-modal-content {
      @apply bg-white p-0;
      .ant-modal-body {
        @apply p-0;
      }
    }
  }

  .article-title {
    @apply px-6 pt-10 pb-6;
  }

  .article-body {
    @apply p-6
  }

  .modal-control-footer {
    @apply p-6
  }

  .input-box {
    // focus-within:shadow
    @apply bg-[#f8f8f8] border border-transparent w-full px-4 py-2 focus-within:bg-[#f0f0f0] focus-within:border-gray-300;
    border-radius: 8px;
  }
}

// 全局按钮
.page-action {
  @apply fixed right-10 bottom-10 flex flex-col gap-4 z-10;
  button {
    @apply border-0 min-w-[120px] h-[40px] rounded-3xl pr-4 flex items-center justify-between drop-shadow;
    .text {
      flex: 1;
      text-align: left;
      padding-left: 15px;
    }

    &:disabled {
      @apply bg-gray-400;
    }

    &.btn-info {
      @apply bg-info text-gray-800;
    }
  }
}

// 时间选择
.timer-select-container {
  .timer-select-value {
    @apply text-blue-500 px-4 cursor-pointer h-[31px];
  }

  .timer-select-options {
    @apply rounded-xl py-1 overflow-hidden drop-shadow absolute inset-x-0 top-[30px];
    background: linear-gradient(180deg, rgb(244, 247, 252) 0%, rgb(217, 232, 255) 100%);
  }

  .timer-select-option-item {
    @apply py-1.5 px-4 cursor-pointer text-gray-800 hover:text-blue-500;
    &.selected {
      @apply text-blue-500;
    }
  }
}

//来源选择
.tag-select-container {
  .select-value {
    @apply text-blue-500 px-4 cursor-pointer h-[31px];
  }

  .options-list-container {
    @apply  py-2 drop-shadow absolute top-[30px];
    border-radius: 0 0 0.75rem 0.75rem;
    background: linear-gradient(180deg, rgb(244, 247, 252) 0%, rgb(217, 232, 255) 100%);
    .inner{
      @apply overflow-auto;
      max-height: 300px;
    }
  }

  .options-list {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .select-option-item {
    @apply py-1.5 px-4 cursor-pointer text-gray-800 hover:text-blue-500 hover:bg-[#d9eaff];
    &.selected {
      @apply text-blue-500;
    }
  }
}

.tag-select-child-container {
  .ant-popover-inner {
    @apply p-0 overflow-hidden drop-shadow shadow-none;
    //
    background: linear-gradient(180deg, rgb(235, 242, 253) 0%, rgb(244, 247, 252) 100%);
    border-radius: 0 0.75rem 0.75rem 0;
    transform: translate(16px, -7px);
    //backdrop-filter: 0 3px 1px 5px rgb(0, 0, 0,0.1);
  }

  .sub-options-list {
    @apply py-1.5 top-0;
    max-height: 150px;

    .select-option-item {
      @apply py-1.5 px-4 cursor-pointer text-gray-800 hover:text-blue-500 hover:bg-[#d9eaff];
      &.selected {
        @apply text-blue-500;
      }
    }
  }
}