@import "../../theme.scss";

body.toplevel_page_topposts_for_google_analytics_settings,
body.toplevel_page_topposts_for_google_analytics_premium_settings {
  background-color: #f9f9f9;

  #wpcontent {
    padding-left: 0 !important;

    html[dir="rtl"] & {
      padding-right: 0 !important;
    }
  }
}

#settings-page {
  color: $primary;
  -webkit-font-smoothing: antialiased;

  a {
    color: $secondary;
  }

  label {
    font-size: 0.825rem;
    font-weight: 500;
    color: $primary;
  }

  html[dir="rtl"] & {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;

    * {
      font-family: inherit !important;
    }
  }

  &,
  * {
    box-sizing: border-box;
  }

  body:has(&) {
    background-color: #f9f9f9;

    #wpcontent {
      padding-left: 0 !important;

      html[dir="rtl"] & {
        padding-right: 0 !important;
      }
    }
  }

  .main-container {
    display: flex;
    padding: calc($padding-lg - 0.1rem);

    .sidebar-expanded {
      flex-shrink: 0;
      width: 13rem;
      margin-inline-end: 1rem;
      transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
      will-change: width;
    }

    .sidebar-collapsed {
      width: 0px;
      overflow: hidden;
      transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
      will-change: width;
      visibility: hidden;
    }

    .sidebar-collapse-container {
      background-color: #e1e1e1;
      width: 1px;
      position: relative;
      margin-top: 2px;
      margin-bottom: 2px;
    }

    .sidebar-toggle-collapse {
      position: absolute;
      left: -12px;
      top: 28px;
      transition: left 300ms cubic-bezier(0.2, 0, 0, 1);
      background-color: #f9f9f9;
      border-radius: 50%;
    }

    &.settings-mobile {
      flex-direction: column;

      .sidebar-expanded {
        flex-shrink: 0;
        width: unset;
        margin-inline-end: unset;
        transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
        will-change: width;
      }

      .sidebar-collapsed {
        width: unset;
        overflow: hidden;
        transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
        will-change: width;
        visibility: visible;
      }

      .side-menu {
        flex-shrink: unset;
        width: unset;
        margin-inline-end: unset;
      }
    }

    .content {
      flex-grow: 1;
      flex-wrap: wrap;
      display: flex;
    }

    .Toastify__toast-container--top-right {
      top: 3em;
      right: 1em;
    }

    .Toastify__toast-container--top-left {
      top: 3em;
      left: 1em;
    }

    .Toastify {
      font-weight: 500;
      font-size: 0.825rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .settings-wrapper {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 5.6rem);
    min-width: 450px;
  }

  .shadow-sm {
    box-shadow: $shadow-sm;
  }

  .shadow-md {
    box-shadow: $shadow-md;
  }

  .shadow-lg {
    box-shadow: $shadow-lg;
  }

  .padding-sm {
    padding: $padding-sm;
  }

  .padding-md {
    padding: $padding-md;
  }

  .padding-lg {
    padding: $padding-lg;
  }

  .fieldDescription {
    margin: 0;
    font-size: 0.8rem;
    color: $text-secondary;
  }

  .flex-row-center {
    display: flex;
    align-items: center;
  }

  .gap-8 {
    gap: 8px;
  }

  .gap-12 {
    gap: 12px;
  }
}

:root {
  --toastify-toast-min-height: 56px !important;
  --toastify-font-family: inherit !important;
  --toastify-text-color-light: #4a4b4f !important;
}