@primary-color: rgba(0, 60, 212, 1);
@border-color: rgba(0, 0, 0, 0.08);
@max-content-width: 1320px;

.block-editor-block-list__block.wp-block {
  max-width: @max-content-width !important;
}

*[class*='lks-'] {
  --wp-admin-theme-color: @primary-color;
  --wp--style--global--content-size: @max-content-width;

  &,
  input,
  button {
    outline: none !important;
    box-shadow: none !important;
  }

  .components-base-control__label {
    text-transform: none;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.9);
  }

  .components-checkbox-control {
    margin: 0;
  }

  .components-checkbox-control__input-container {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border-radius: 2px;

    input,
    svg {
      width: 16px;
      height: 16px;
      top: 0;
      left: 0;
      border-radius: 2px;
    }

    input[type='checkbox'] {
      border-color: @border-color;
      outline: none;
      border-radius: 2px;
      font-weight: 600;
      font-size: 14px;

      &:checked {
        background: @primary-color;
        border-color: @primary-color;
      }

      &:disabled {
        background: #f2f2f2;
        border-color: #e1e1e1;
      }
    }
  }
}

.lks-wp-plugin {
  &-editor {
  }

  &-render {
  }
}

.lks-product-card {
  // &__card-radio {
  // 	&__options {
  // 		display: flex;
  // 		flex-direction: column;
  // 		row-gap: 12px;

  // 		&__item {
  // 			width: 100%;
  // 			padding: 16px;
  // 			padding-bottom: 8px;
  // 			border-radius: 16px;
  // 			border: 1px solid @border-color;
  // 			background: #fff;
  // 			display: flex;
  // 			flex-direction: column;
  // 			cursor: pointer;

  // 			&--active {
  // 				border-color: @primary-color;
  // 				background: rgba(226, 234, 255, 1);
  // 			}

  // 			&__thumbnail {
  // 				width: 100%;
  // 				display: flex;
  // 				justify-content: center;
  // 				align-items: center;
  // 				margin-bottom: 8px;

  // 				&__img {
  // 					// height: 100%;
  // 					max-width: 120px;
  // 				}
  // 			}

  // 			&__label {
  // 				display: flex;
  // 				justify-content: center;
  // 				align-items: center;
  // 				height: 32px;

  // 				&__dot {
  // 					width: 16px;
  // 					height: 16px;
  // 					border-radius: 50%;
  // 					border: 1px solid @border-color;
  // 					margin-right: 8px;

  // 					&--active {
  // 						border: 4px solid @primary-color;
  // 					}
  // 				}

  // 				&__text {
  // 					color: rgba(0, 0, 0, 0.7);
  // 					font-size: 14px;
  // 				}
  // 			}
  // 		}
  // 	}
  // }

  &__radio-group {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 12px;

    &__item {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &__dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid @border-color;
        margin-right: 8px;

        &--active {
          border: 4px solid @primary-color;
        }
      }

      &__label {
        color: rgba(0, 0, 0, 0.7);
        font-size: 14px;
        display: flex;
        align-items: center;

        &__tips {
          width: 20px;
          height: 20px;
          margin-left: 4px;
          cursor: pointer;

          &__icon {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    &__popover {
      .components-popover__content {
        border: none;
        box-shadow: none;
        border-radius: 8px;
        overflow: hidden;
        box-shadow:
          0px 9px 28px 8px rgba(0, 0, 0, 0.05),
          0px 6px 16px 0px rgba(0, 0, 0, 0.08),
          0px 3px 6px -4px rgba(0, 0, 0, 0.12);
      }

      &__content {
        padding: 8px 8px 4px;

        & > img {
          max-height: 120px;
        }
      }
    }
  }

  &__edit {
    &__empty {
      padding: 16px;
      border: 1px solid @border-color;
      border-radius: 8px;
      background: #fff;

      &__header {
        display: flex;
        align-items: center;
        height: 28px;

        &__logo {
          width: 20px;
          height: 20px;
          margin-right: 12px;
        }

        &__title {
          font-size: 18px;
        }
      }

      &__body {
        height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  &__add-products-modal {
    @media (min-width: 600px) {
      &.components-modal__frame.has-size-large {
        max-width: 960px;
      }
    }

    &__body {
      position: relative;

      &__search {
        padding-top: 8px;
        display: flex;
        align-items: end;
        column-gap: 12px;
        margin-bottom: 16px;
        position: sticky;
        z-index: 20;
        top: 0;
        background: #fff;
        flex-wrap: wrap;

        &__item {
          &--brand,
          &--category,
          &--title {
            width: 200px;

            select,
            input {
              height: 32px;

              option {
                color: rgb(30, 30, 30);
              }
            }
          }

          &.is-empty select {
            color: rgba(0, 0, 0, 0.3) !important;
          }

          &--category select option:first-of-type {
            display: none;
          }
        }

        &__operation {
          white-space: nowrap;

          &__reset {
            margin: 8px;
          }
        }
      }

      &__table {
        &__img {
          width: 40px;
          border-radius: 8px;
        }
      }

      &__footer {
        text-align: right;
        position: sticky;
        z-index: 20;
        bottom: 0;
        background: #fff;
        padding: 24px 0;

        &__cancel {
          margin-right: 8px;
        }
      }
    }
  }
}

.lks-button.components-button {
  &.is-primary {
    background: @primary-color;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;

    &:hover,
    &:active {
      background: @primary-color;
    }
  }

  &.is-secondary {
    color: rgba(0, 0, 0, 0.9);
    background: #fff;
    border: 1px solid @border-color;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;

    &:hover,
    &:active {
      background: #fff;
    }
  }

  &:disabled {
    border: 1px solid #d9d9d9 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    color: rgba(0, 0, 0, 0.25) !important;
  }
}

.lks-modal.components-modal__frame {
  .components-modal__content {
    margin-top: 56px;
    padding-top: 0;
    padding-bottom: 0;

    .components-modal__header {
      height: 56px;
      padding: 0 16px 0 24px;

      .components-button {
        color: rgba(0, 0, 0, 0.3);

        &:hover {
          color: rgba(0, 0, 0, 0.75);
        }
      }

      .components-modal__header-heading-container {
        color: rgba(0, 0, 0, 0.88);

        .components-modal__header-heading {
          font-size: 16px;
        }
      }
    }
  }

  label.components-text.components-input-control__label,
  label.components-base-control__label {
    text-transform: none;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.9);
  }

  .components-input-control__backdrop {
    border-color: @border-color !important;
  }

  .components-input-control__suffix svg {
    fill: @border-color;
  }

  .components-input-control__container {
    border-radius: 8px;
  }

  .components-text-control__input {
    border-radius: 8px;
    border-color: @border-color;

    &::placeholder {
      color: rgba(0, 0, 0, 0.3) !important;
    }

    &:focus,
    &.active {
      border-color: @primary-color;
    }
  }
}

.lks-table {
  width: 100%;
  border-bottom: 1px solid @border-color;

  &__th,
  &__td {
    text-align: left;

    &--align-left {
      text-align: left;
    }

    &--align-center {
      text-align: center;
    }

    &--align-right {
      text-align: right;
    }
  }

  &__thead {
    &__tr {
      &__th {
        padding: 16px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        line-height: 16.8px;
        border-right: 1px solid @border-color;
        border-bottom: 1px solid @border-color;

        &:last-of-type {
          border-right-color: transparent;
        }
      }
    }
  }

  &__tbody {
    word-break: break-all;

    &__tr {
      &__td {
        padding: 16px;
        color: rgba(0, 0, 0, 0.7);
        font-size: 14px;
        line-height: 16.8px;
      }
    }

    &__empty {
      margin: 32px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &__img {
        width: 64px;
        margin-bottom: 8px;
      }

      &__text {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        margin: 0;
      }
    }
  }

  &__footer {
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__text {
      color: rgba(0, 0, 0, 0.7);
      font-size: 14px;
      line-height: 16.8px;
    }
  }
}

.lks-pagination {
  display: flex;
  row-gap: 8px;
  column-gap: 8px;

  &__btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:not(&--active):not(&--disabled):hover {
      background: rgba(246, 249, 255, 1);
    }

    &--active {
      color: @primary-color;
      background: rgba(226, 234, 255, 1);
      font-weight: 600;
    }

    &--disabled {
      color: rgba(0, 0, 0, 0.25);
      cursor: not-allowed;
    }
  }
}

.lks-product-card__products {
  display: flex;
  row-gap: 16px;
  column-gap: 16px;
  flex-direction: row;
  position: relative;

  &--HORIZONTAL {
    flex-wrap: nowrap;
    overflow-x: scroll;
  }

  &--VERTICAL {
    flex-wrap: wrap;
    justify-content: center;
  }

  &__item {
    padding: 16px;
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none !important;

    &--UP_DOWN {
      flex-direction: column;
      justify-content: space-between;
    }

    &--Small {
      width: 212px;
      min-width: 212px;
    }

    &--Medium {
      width: 332px;
      min-width: 332px;
    }

    &--Large {
      width: 632px;
      min-width: 632px;
    }

    &--LEFT_RIGHT {
      width: 632px;
      min-width: 632px;
    }

    &--LEFT_RIGHT--Large {
      width: 968px;
      min-width: 968px;
    }

    &__img {
      object-fit: contain;

      &--Small {
        width: 180px !important;
        height: 240px !important;
      }

      &--Medium {
        width: 300px !important;
        height: 400px !important;
      }

      &--Large {
        width: 600px !important;
        height: 800px !important;
      }
    }

    &__info {
      color: rgba(0, 0, 0, 0.9);
      padding-top: 8px;
      margin-left: 24px;

      &__brand {
        font-size: 20px;
        line-height: 24px;
        font-weight: 600;
        margin-bottom: 24px;
      }

      &__category {
        font-size: 14px;
        line-height: 16.8px;
        height: 24px;
        background: rgba(226, 234, 255, 1);
        border-radius: 9999px;
        line-height: 24px;
        padding: 0 8px;
        margin-bottom: 16px;
        width: max-content;
      }

      &__name {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 24px;
      }

      &__price {
        display: flex;
        flex-direction: column;

        &__discount {
          font-weight: 600;
          font-size: 24px;
          line-height: 28.8px;
          color: rgba(255, 77, 79, 1);
          margin-bottom: 4px;
          white-space: nowrap;
          width: max-content;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: right;
        }

        &__original {
          color: rgba(0, 0, 0, 0.7);
          font-size: 14px;
          line-height: 16.8px;
          text-decoration: line-through;
          white-space: nowrap;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
      }
    }

    &--UP_DOWN--Large &__info {
      width: 600px;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      width: 100%;
      padding: 24px 24px 32px;
      display: none;
      box-sizing: border-box;
    }

    &--UP_DOWN--Large:hover &__info {
      display: block;
    }

    &--UP_DOWN &__info {
      text-align: center;
      margin-left: 0;
      margin-top: 16px;

      &__brand {
        margin-bottom: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &__category {
        display: none;
      }

      &__name {
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &__price {
        flex-direction: row;
        align-items: center;
        justify-content: center;

        &__discount {
          margin-bottom: 0;
          margin-right: 4px;
          min-width: 50%;
        }

        &__original {
          color: rgba(0, 0, 0, 0.7);
          font-size: 14px;
          line-height: 16.8px;
        }
      }
    }
  }
}

.lks-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  svg {
    width: 1em;
    height: 1em;
    display: inline-block;
  }
}

.lks-loading {
  position: relative;

  &--loading {
  }

  &__mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.5;

    &__icon {
      position: absolute;
      left: 50%;
      margin-left: -18px;
      color: @primary-color;
      animation: rotate 1s linear infinite;
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}