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

.stw-settings-page,
.stw-settings-page #wpbody {
  background-color: rgb(249 250 251 / 1);
}

.stw-settings-page #wpbody .logo a:focus {
  outline: none;
  box-shadow: none;
}

.stw-free-logo {
  width: 275px;
}

.wp-editor-wrap {
  width: 100%;
}

.stw-feature-btn {

  a,
  button {
    display: inline-block;
    background: #007cba;
    border-color: #007cba;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    padding: 0.8rem 1.1rem;
    margin-right: 1rem;
    font-weight: bold;
    font-size: 16px;

    &:hover {
      color: #fff;
      background-color: #32a8e4;
    }
  }
}

.stw-checkbox-control {
  input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    &+.ant-checkbox-inner {
      background-color: #ffffff !important;
      border-color: #d9d9d9 !important;

      &::after {
        border-color: #ffffff !important;
        opacity: 0 !important;
      }
    }

    &:checked {
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      appearance: none !important;

      &:before {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-color: #007bff !important;
        border-color: #007bff !important;
      }

      &+.ant-checkbox-inner {
        background-color: #1677ff !important;
        border-color: #1677ff !important;

        &::after {
          border-color: #ffffff !important;
          opacity: 1 !important;
          transform: rotate(45deg) scale(1) translate(-50%, -50%);
          transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
        }
      }
    }
  }
}

.ant-tooltip-inner {
  font-size: 12px;
}

.ant-notification {
  .stw-notification-success {
    background-color: #6BB738;
    border-left: 5px solid #56952c;

    &:before {
      background: transparent;
      border: none;
    }
  }

  .stw-notification-error {
    background-color: #ff4d4f;
    border-left: 5px solid #952c2c;

    &:before {
      background: transparent;
      border: none;
    }
  }

  .stw-notification-success,
  .stw-notification-error {
    .ant-notification-notice-icon {

      &:before,
      svg {
        color: #FFF;
      }
    }

    .ant-notification-notice-with-icon {
      .ant-notification-notice-message {
        color: #FFF;
      }

      .ant-notification-notice-description {
        color: #FFF;
        z-index: 9999;
        position: relative;
      }
    }

    .ant-notification-close-icon {
      &.anticon {
        svg {
          color: #FFF;
        }
      }
    }
  }
}

.ant-select-dropdown {
  width: auto !important;
}

.anticon-edit {
  color: #008000;
}

.anticon-delete {
  color: #ff0000;
}

.ant-drawer {
  z-index: 99999;

  .ant-drawer-content {
    .stw-row-handle {
      display: flex;
      align-content: center;
      flex-wrap: nowrap;

      .stw-left-content {
        width: 28%;
        display: flex;
        justify-content: space-between;
        margin-right: 2%;

        h5 {
          margin: 0;
        }
      }

      .stw-right-content {
        width: 70%;
      }
    }
  }
}

.ant-select-dropdown {
  z-index: 99999;
}

.ant-tooltip {
  z-index: 99999;
}

#saveto-wishlist-admin-app-settings {
  /* Offsets used by the sticky settings header/sidebar/preview panel. */
  --stwlite-admin-bar-height: 32px;
  --stwlite-header-height: 81px;
  /* The +16px keeps a visible gap below the header and gives the sticky
     positioning slack against sub-pixel/momentum-scroll rounding. */
  --stwlite-sticky-top: calc(var(--stwlite-admin-bar-height) + var(--stwlite-header-height) + 16px);

  @media screen and (max-width: 782px) {
    --stwlite-admin-bar-height: 46px;
  }

  .margin-top {
    margin-top: 20px;
  }

  .margin-bottom {
    margin-bottom: 20px;
  }

  .ant-tabs.ant-tabs-top {
    .ant-tabs-nav-list {
      .ant-tabs-tab {
        padding: 14px 10px;

        .ant-tabs-tab-btn {
          font-size: 16px;
          color: #252525;
        }
      }
    }
  }

  .stw-settings-save-btn,
  .save-group-btn,
  .wpp-action-btn {
    color: #fff;
    background-color: #1677ff;
    box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
    border: none;

    &:hover {
      color: #fff;
      background-color: #4096ff;
    }
  }

  .ant-tabs.ant-tabs-left {
    .ant-tabs-nav-list {
      .ant-tabs-tab {
        padding: 0;
        min-width: 250px;
        margin: 0px;
        border-left: 1px solid #E8E8EB;
        border-bottom: 1px solid #E8E8EB;
        width: 100%;
        display: inline-block;

        .ant-tabs-tab-btn {
          font-size: 14px;
          color: #252525;
        }

        .tab-child-item {
          display: inline-block;
          padding: 10px;
          width: 100%;
          text-align: initial;
          color: #000;
        }

        .tab-with-bg {
          background-color: #1DA867;
          color: #fff;
        }

        &:first-child {
          border-top: 1px solid #E8E8EB;
        }
      }
    }

    .ant-tabs-content-holder {
      border-top: 1px solid #E8E8EB;
      border-right: 1px solid #E8E8EB;
      border-bottom: 1px solid #E8E8EB;
      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 20px;

      hr {
        width: 15px;
        border-width: 2px;
        text-align: start;
        margin: 0;
        border-color: #45BE93;
      }
    }
  }

  .ant-tabs-ink-bar {
    background: #45BE93;
  }

  .stw-section-handle {
    .stw-row-handle {
      display: flex;

      p {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
      }

      .stw-left-content {
        width: 24%;
        margin-right: 1%;
        display: flex;
        justify-content: space-between;

        h4 {
          font-weight: 700;
          font-size: 16px;
          line-height: 18.75px;
          margin: 0;
        }

        h5 {
          font-weight: 700;
          font-size: 14px;
          line-height: 22px;
          margin: 0;
        }
      }

      .stw-right-content {
        width: 75%;

        label span,
        p {
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
        }

        input,
        select,
        textarea {
          width: 100%;
          max-width: 320px;
        }

        .ant-select-selector {
          p {
            margin: 0;
            padding: 0;
            display: inline;
            vertical-align: middle;
          }
        }
      }
    }

    .stw-installed-label {
      p {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
      }

      .dashicons-yes-alt {
        color: #6abd45;
        margin-right: 5px;
        font-size: 24px;
      }
    }

    .stw-package-active {
      background: #e5ffe5;
    }
  }

  .stw-child-tab {

    .stw-upgrade-code-block,
    .stw-upgrade-code2-block {
      max-width: 1000px;
      display: block;
      margin: 0 auto;
      text-align: center;
      padding: 30px 40px;
      background: #fff;
      -webkit-box-shadow: -1px 2px 18px -10px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: -1px 2px 18px -10px rgba(0, 0, 0, 0.75);
      box-shadow: -1px 2px 18px -10px rgba(0, 0, 0, 0.75);

      .stw-img-logo {
        margin-bottom: 10px;
      }

      .stw-heading-upgrade {
        font-size: 24px;
        font-weight: 600;
        margin: 20px;
      }

      .stw-paragraph-upgrade {
        p {
          margin-bottom: 10px;
          font-size: 18px;
        }
      }

      .stw-paragraph-feature {
        p {
          font-weight: 400;
          font-size: 24px;
          margin: 14px;
        }
      }

      .stw-feature-custom-btn {

        a,
        button {
          font-size: 18px;
          font-weight: bold;
          color: #fff;
          background-color: #f7941d;
          border-style: solid;
          border-width: 1px 1px 1px 1px;
          border-color: #A85E06;
          padding: 10px 20px;
          -webkit-border-radius: 5px;
          border-radius: 5px;
          text-decoration: none;
          display: inline-block;
          margin-bottom: 10px;
        }
      }

      // Packages.
      .stw-heading-package-bundle {
        padding: 20px;
        border-top: 1px solid;
        border-left: 1px solid;
        border-right: 1px solid;
        margin: 0;
        text-align: left;
      }

      .stw-paragraph-package-bundle {
        border-left: 1px solid;
        border-right: 1px solid;
        margin: 0;
        padding: 20px;
        text-align: left;

        p {
          width: 65%;
        }
      }

      .stw-bundle-img {
        position: relative;
        border-left: 1px solid;
        border-right: 1px solid;

        img {
          position: absolute;
          top: -200px;
          right: 0;
        }
      }

      .stw-package-link {
        border-left: 1px solid;
        border-right: 1px solid;
        border-bottom: 1px solid;
        margin-bottom: 30px;
        padding-bottom: 20px;
        padding-right: 20px;
        padding-left: 20px;
        text-align: left;

        a {
          font-size: 18px;
          text-decoration: underline;
        }
      }

      .upgrade-feature-table {
        .ant-table-tbody {
          .ant-table-row {
            .ant-table-cell {
              .dashicons-no {
                color: #ff0000;
              }

              .dashicons-yes-alt {
                color: #6abd45;
              }
            }
          }
        }
      }
    }
  }
}