Untitled

ion-toolbar {
  --padding-start: 0px;
  --padding-end: 0px;
  --background: transparent;
  --padding-bottom: 10px; // Bottom padding for toolbar

  padding-top: env(safe-area-inset-top + 40px); // Default padding adjusted for notch
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);

  &.guest-toolbar {
    height: 100px; // Default height for guest users
    padding: 0;

    .header-container {
      padding: 0 10px;
    }

    .new-menu-section {
      padding: 0 15px;
    }
  }

  &.logged-in-toolbar {
    height: 170px; // Default height for logged-in users
    padding: 0;

    .header-container {
      padding: 0 20px;
    }

    .new-menu-section {
      padding: 0 20px;
    }
  }

  // Media Queries for Responsiveness

  // Extra Small Devices
  @media (max-width: 575.98px) {
    &.guest-toolbar {
      height: 80px; // Adjusted height for smaller screens
    }

    &.logged-in-toolbar {
      height: 150px; // Adjusted height for smaller screens
    }

    .header-background {
      height: 200px; // Adjusted background height
    }

    .header-container {
      padding-top: 5px;

      .menu-button {
        padding-top: env(safe-area-inset-top + 20px);
      }

      .logo-label {
        padding-top: env(safe-area-inset-top + 10px);
      }

      .profile {
        padding-top: env(safe-area-inset-top + 20px);
      }
    }

    .new-menu-section {
      gap: 15px; // Reduced gap for smaller screens
      padding-bottom: 15px;
    }
  }

  // Small Devices
  @media (min-width: 576px) and (max-width: 767.98px) {
    &.guest-toolbar {
      height: 90px; // Slightly adjusted height for small devices
    }

    &.logged-in-toolbar {
      height: 160px; // Slightly adjusted height for small devices
    }

    .header-background {
      height: 220px; // Adjusted background height
    }

    .header-container {
      padding-top: 10px;

      .menu-button {
        padding-top: env(safe-area-inset-top + 25px);
      }

      .logo-label {
        padding-top: env(safe-area-inset-top + 15px);
      }

      .profile {
        padding-top: env(safe-area-inset-top + 25px);
      }
    }
  }

  // Medium Devices
  @media (min-width: 768px) and (max-width: 991.98px) {
    &.guest-toolbar {
      height: 100px; // Maintain height for medium devices
    }

    &.logged-in-toolbar {
      height: 170px; // Maintain height for medium devices
    }

    .header-background {
      height: 230px; // Background height for medium devices
    }

    .header-container {
      padding-top: 15px;

      .menu-button {
        padding-top: env(safe-area-inset-top + 30px);
      }

      .logo-label {
        padding-top: env(safe-area-inset-top + 20px);
      }

      .profile {
        padding-top: env(safe-area-inset-top + 30px);
      }
    }

    .new-menu-section {
      gap: 20px; // Adjust gap for medium devices
    }
  }

  // Large Devices
  @media (min-width: 992px) and (max-width: 1199.98px) {
    &.guest-toolbar {
      height: 110px; // Slightly taller for large devices
    }

    &.logged-in-toolbar {
      height: 180px; // Slightly taller for large devices
    }

    .header-background {
      height: 240px; // Background height for large devices
    }

    .header-container {
      padding-top: 20px;

      .menu-button {
        padding-top: env(safe-area-inset-top + 35px);
      }

      .logo-label {
        padding-top: env(safe-area-inset-top + 25px);
      }

      .profile {
        padding-top: env(safe-area-inset-top + 35px);
      }
    }
  }

  // Extra Large Devices
  @media (min-width: 1200px) {
    &.guest-toolbar {
      height: 120px; // Maintain height for extra large screens
    }

    &.logged-in-toolbar {
      height: 190px; // Maintain height for extra large screens
    }

    .header-background {
      height: 250px; // Maintain background height for larger screens
    }

    .header-container {
      padding-top: 20px;

      .menu-button {
        padding-top: env(safe-area-inset-top + 35px);
      }

      .logo-label {
        padding-top: env(safe-area-inset-top + 25px);
      }

      .profile {
        padding-top: env(safe-area-inset-top + 35px);
      }
    }
  }
}