@use "../../../styles/abstracts/variables";
@use "../../../styles/abstracts/mixins";

.layout {
  height: 100vh;

  display: grid;

  grid-template-columns: 280px 1fr;

  position: relative;

  overflow: hidden;

  font-family: variables.$font;

  background:
    radial-gradient(
      circle at top right,
      rgba(247, 147, 24, 0.04),
      transparent 25%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(247, 147, 24, 0.03),
      transparent 30%
    ),
    variables.$col-base-dark;

  @media only screen and (max-width: 1000px) {
    grid-template-columns: 1fr;
  }

  &__bottombar {
    display: none;

    @media only screen and (max-width: 1000px) {
      display: block;
    }
  }

  /* ==========================================
     SIDEBAR
  ========================================== */

  &__sidebar {
    position: fixed;

    left: 0;
    top: 0;

    width: 280px;

    height: 100vh;

    z-index: 50;

    border-right: 1px solid rgba(255, 255, 255, 0.04);

    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.015),
        transparent
      ),
      variables.$col-primary;

    backdrop-filter: blur(20px);

    @media only screen and (max-width: 1000px) {
      width: 70%;

      z-index: 888;

      height: auto;

      top: 5.4rem;

      display: none;
    }
  }

  /* ==========================================
     CONTENT
  ========================================== */

  &__content {
    position: absolute;
    right: 0;

    width: calc(100% - 280px);

    height: 100vh;

    overflow-y: auto;

    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media only screen and (max-width: 1000px) {
      width: 100%;

      left: 0;
    }

    /* ==========================================
       NAVBAR
    ========================================== */

    &__navbar {
      position: fixed;

      top: 0;

      right: 0;

      width: calc(100% - 280px);

      height: 72px;

      z-index: 100;

      border-bottom: 1px solid rgba(255, 255, 255, 0.04);

      background:
        linear-gradient(
          180deg,
          rgba(16, 16, 18, 0.92),
          rgba(16, 16, 18, 0.82)
        );

      backdrop-filter: blur(24px);

      @media only screen and (max-width: 1000px) {
        width: 100%;
      }
    }

    /* ==========================================
       PAGE CONTENT
    ========================================== */

    &--children {
      position: relative;

      min-height: 100vh;

      padding: 6rem 2rem 5rem;

      background: transparent;

      z-index: 2;

      animation: fadeIn 0.35s ease;

      @media only screen and (max-width: 1000px) {
        display: flex;

        flex-direction: column;

        width: 100%;

        padding: 5rem 1rem 6rem;

        margin-bottom: 4rem;
      }

      &::before {
        content: "";

        position: fixed;

        top: -150px;
        right: -150px;

        width: 400px;
        height: 400px;

        border-radius: 50%;

        background:
          radial-gradient(
            circle,
            rgba(247, 147, 24, 0.06),
            transparent 70%
          );

        pointer-events: none;

        z-index: -1;
      }

      &::after {
        content: "";

        position: fixed;

        bottom: -200px;
        left: -200px;

        width: 500px;
        height: 500px;

        border-radius: 50%;

        background:
          radial-gradient(
            circle,
            rgba(247, 147, 24, 0.03),
            transparent 75%
          );

        pointer-events: none;

        z-index: -1;
      }
    }
  }
}

/* ==========================================
   GLOBAL SCROLLBAR
========================================== */

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ==========================================
   FLASH MESSAGES
========================================== */

.flash {
  position: fixed;

  top: 1.25rem;

  right: 1.25rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.9rem 1rem;

  border-radius: 14px;

  backdrop-filter: blur(24px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25);

  color: #fff;

  font-size: 0.85rem;

  font-weight: 500;

  z-index: 9999;

  animation: slideIn 0.3s ease;
}

.flashSuccess {
  background:
    linear-gradient(
      135deg,
      rgba(34, 197, 94, 0.18),
      rgba(34, 197, 94, 0.08)
    );
}

.flashError {
  background:
    linear-gradient(
      135deg,
      rgba(239, 68, 68, 0.18),
      rgba(239, 68, 68, 0.08)
    );
}

.flashWarning {
  background:
    linear-gradient(
      135deg,
      rgba(245, 158, 11, 0.18),
      rgba(245, 158, 11, 0.08)
    );
}

.flashInfo {
  background:
    linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.18),
      rgba(59, 130, 246, 0.08)
    );
}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}