@use 'variables.scss' as *; // Import variables as global

// General application layout and styles for the 'containing' components (nav, content, etc)

body {
  margin: 0;
}

// The app layout
.alert-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.layout-container {
  flex-grow: 1;
  display: flex;
  width: 100%;
  .layout-sidebar {
    background-color: $tenant-ui-primary-color;
    color: $tenant-ui-text-on-primary;
    min-width: 20em;
  }
  // Innkeeper specifics
  &.innkeeper-layout .layout-sidebar {
    background-color: $innkeeper-ui-primary-color;
    color: $innkeeper-ui-text-on-primary;
  }

  .layout-page {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .layout-header {
    background-color: white;
  }

  .layout-content {
    flex: 1;
    background-color: #e4e4e4;
    padding: 0.5em;

    // The card container for pages
    .p-card .p-card-body {
      padding-bottom: 0;
      .p-card-content {
        padding-bottom: 8px;
        padding-top: 0;
      }
    }
  }
}

// The Login screen layout
.traction-login {
  .logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .logo-bc {
    @extend .logo;
    width: 18em;
  }
  .logo-traction {
    @extend .logo;
    width: 20em;
  }

  .cover-image {
    background-repeat: no-repeat;
    background-size: cover;
    .copyright {
      color: white;
      font-size: 0.5em;
      background-color: rgba($color: #000000, $alpha: 0.5);
      padding: 0 0.5em;
      margin: 1em;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

// Option for OIDC login
.oidc-login {
  margin-top: 2em;
  hr {
    height: 1px;
    background-color: rgb(186, 186, 186);
    border: 0;
  }
  span {
    display: block;
    text-align: center;
  }
}

// Sidebar layout styling
.traction-sidebar {
  .sidebar-app-title {
    font-size: 1.6em;
    text-align: center;
    padding: 0.5em;
    margin: 0.5em;
    background-color: $tenant-ui-accent-color;
    text-transform: uppercase;
    word-wrap: break-word;
    .p-progress-spinner {
      width: 1.2em;
      height: 1.2em;
    }
  }
  // Innkeeper specifics
  &.innkeeper-sidebar .sidebar-app-title {
    background-color: white;
    color: $innkeeper-ui-primary-color;
    margin: 0.5em 1em;
    letter-spacing: 3px;
  }

  .p-panelmenu {
    .p-panelmenu-panel {
      * {
        border: none !important;
        font-weight: normal !important;
        background-color: $tenant-ui-primary-color !important;
        color: $tenant-ui-text-on-primary !important;
      }
      .p-submenu-list {
        padding-left: 2.5em;
      }
      // Override the order of the drop down icon
      .p-panelmenu-header {
        .p-panelmenu-header-content {
          width: 100%;
        }
        display: flex;
        svg.p-submenu-icon {
          display: flex;
          order: 2;
          margin-left: auto;
        }
        .p-panelmenu-header-action {
          padding-top: 0.75em;
          padding-bottom: 0.75em;
        }
        .p-menuitem-icon {
          font-size: 1.3em;
        }
      }
      .p-menuitem-content {
        padding-top: 0.75em;
        padding-bottom: 0.75em;
      }
    }
  }
  // Innkeeper specifics
  &.innkeeper-sidebar .p-panelmenu .p-panelmenu-panel * {
    background-color: $innkeeper-ui-primary-color !important;
    color: $innkeeper-ui-text-on-primary !important;
  }
}

// Header Layout Styling
.traction-header {
  &.p-toolbar {
    background-color: white !important;
    border-radius: 0 !important;
  }
}

.row {
  display: flex;
  flex-direction: row;
  margin: 10px;
}

/* By default the small title is hidden, and the large title is shown */
.sidebar-app-title.small {
  display: none;
  font-size: 2rem;
}

/* When the sidebar is closed */
@mixin closed {
  .p-menuitem-text {
    display: none;
  }
  .p-menuitem-icon {
    font-size: 2rem !important;
    margin-left: 0.5rem;
  }
  .p-submenu-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .sidebar-app-title {
    display: none;
  }
  .sidebar-app-title.small {
    display: block;
  }

  .p-submenu-list {
    padding-left: 1.5rem !important;
    .p-menuitem-icon {
      position: relative;
      font-size: 1.5rem !important;
      margin-left: 0;
    }
  }
}

/* When the sidebar is open */
@mixin open {
  .p-menuitem-text {
    display: '';
  }
  .p-menuitem-icon {
    font-size: '';
    margin-left: '';
  }
  .sidebar-app-title {
    display: '';
  }
  .sidebar-app-title.small {
    display: '';
  }
}

/*
 If the user has not selected a sidebar state, then use media queries to
  determine the state.
 */
.layout-sidebar:not(.open, .closed) {
  @media (max-width: 1000px) {
    min-width: 6rem !important;
    width: 6rem;
    @include closed;
  }
}

/*
 If the user has selected a sidebar state, then use that state.
 */
.layout-sidebar.closed {
  min-width: 6rem !important;
  width: 6rem;
  @include closed;
}
.layout-sidebar.open {
  min-width: '';
  width: '';
  @include open;
}

/**
  * The sidebar transition is not smooth, so we need to add a transition
  *  to the sidebar width.
  */
.layout-sidebar {
  transition: width 0.2s ease-in-out;
  transition: min-width 0.2s ease-in-out;
}
