@use "vars" as vars;
@use "customize-settings";
@use "modules";
@use "sidebar";

.plover-dashboard-wrap {
  color: vars.$text;

  svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
  }

  .plover-dashboard-body {
    max-width: 100%;
    margin: 0 auto;
    padding: vars.$spacing;
    display: flex;
    flex-wrap: wrap;

    .plover-dashboard-sidebar,
    .plover-dashboard-main {
      flex-shrink: 0;
      width: 100%;
    }

    .plover-dashboard-sidebar {
      padding: vars.$spacing-sm;
    }
  }

  .plover-dashboard-main {
    padding: vars.$spacing-sm;

    > * {
      margin-bottom: vars.$spacing;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    .dashboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vars.$spacing-sm;

      > * {
        margin: 0;
      }

      a:not(.plover-admin-button):not(.plover-admin-badge) {
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        background-image: vars.$primary-gradient;

        &:hover {
          background-image: vars.$primary-gradient-invert;
        }
      }
    }

    .plover-dashboard-content {
      background: vars.$neutral-0;
      padding: vars.$spacing;
      border: 1px solid vars.$neutral-300;
      border-radius: vars.$border-radius;
    }
  }

  // large screen
  @media screen and (min-width: 1024px) {

    .plover-dashboard-body {
      .plover-dashboard-main {
        width: 70%;
      }

      .plover-dashboard-sidebar {
        width: 30%;
      }
    }
  }

  @media screen and (min-width: 1366px) {
    .plover-dashboard-body {
      max-width: 1280px;
    }
  }
}