//
// Copyright IBM Corp. 2021, 2025
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

// Standard imports.
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/config' as carbon-config;

@use '../../global/styles/project-settings' as c4p-settings;

// CreateFullPage uses the following IBM Products components:
// ActionSet, CreateInfluencer and SimpleHeader
@use '../CreateInfluencer/index' as *;
@use '../ActionSet/action-set' as *;
@use '../SimpleHeader' as *;

// The block part of our conventional BEM class names (blockClass__E--M).
$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
$step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;

.#{$block-class} {
  display: grid;
  block-size: 100%;
  color: $text-primary;
  grid-template-rows: minmax(auto, 100%);

  &:has(.#{$block-class}__header) {
    grid-template-rows: auto minmax(auto, 100%);
  }
}

.#{$block-class} .#{$block-class}__content .#{carbon-config.$prefix}--grid {
  margin-inline: 0;
  padding-block-start: $spacing-06;
}

.#{$block-class} .#{$step-block-class}__step--hidden-step {
  display: none;
}

.#{$block-class} .#{$step-block-class}__step--visible-step {
  display: block;
}

.#{$block-class} .#{$block-class}__step-subtitle {
  @include type.type-style('heading-compact-01');

  margin-block-end: $spacing-03;
}

.#{$block-class} .#{$block-class}__step-description {
  @include type.type-style('body-01');

  margin-block-end: $spacing-06;
}

.#{$block-class} .#{carbon-config.$prefix}--fieldset {
  margin-block-end: 0;
}

.#{$block-class} .#{$block-class}__step-fieldset > * {
  margin-block-end: $spacing-05;
}

.#{$block-class} .#{carbon-config.$prefix}--modal-close {
  display: none;
}

.#{$block-class}__influencer-and-body-container {
  display: flex;
  overflow: hidden;
  padding: 0;
  margin: 0;
  max-block-size: 100%;
}

.#{$block-class} .#{$block-class}__left-nav {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  overflow-y: auto;
  @supports (overflow-block: auto) {
    overflow-block: auto;
  }
}

.#{$block-class} .#{$block-class}__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.#{$block-class} .#{$block-class}__main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-block-size: 100%;
}

.#{$block-class} .#{$block-class}__content {
  overflow: auto;
  flex-grow: 1;
  background-color: $background;
  color: $text-primary;
  overflow-x: hidden;
  @supports (overflow-inline: hidden) {
    overflow-inline: hidden;
  }

  padding-block-start: $spacing-06;
}

.#{$block-class} .#{$block-class}__step {
  position: relative;
  padding-block-end: $spacing-07;
}

.#{$block-class}__step .#{carbon-config.$prefix}--css-grid {
  margin-inline-start: 0;
}

.#{$block-class} .#{carbon-config.$prefix}--side-nav--ux {
  background-color: transparent;
  block-size: min-content;
  border-inline-end: 1px solid $border-subtle-01;
  grid-row: 1;
  inset-block-start: 0;
  overflow-x: auto;
  @supports (overflow-inline: auto) {
    overflow-inline: auto;
  }

  padding-block-start: 0;
}

.#{$block-class} .#{$block-class}__section-divider {
  position: relative;
  display: block;
  margin: $spacing-07 calc(-1 * #{$spacing-08}) $spacing-07
    calc(-1 * #{$spacing-08});
  block-size: 1px;
  inline-size: 0;

  /* stylelint-disable-next-line max-nesting-depth */
  &::after {
    position: absolute;
    background-color: $layer-accent-01;
    block-size: 1px;
    content: '';
    inline-size: 100vw;
    inset-block-start: 0;
    inset-inline-start: 0;
  }
}

.#{$block-class} .#{$block-class}__step-title {
  @include type.type-style('heading-04');

  margin-block-end: $spacing-05;
}

.#{$block-class} .#{$block-class}__influencer {
  display: grid;
  flex: 0 0 257px;
  background-color: $layer-01;
  border-inline-end: 1px solid $layer-accent-01;
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto;
}

.#{$block-class}
  .#{$block-class}__progress-indicator.#{carbon-config.$prefix}--progress {
  padding: $spacing-06;
}

.#{$block-class} .#{$block-class}__influencer-toggle {
  padding: $spacing-06;
  grid-column: 1 / -1;
  grid-row: -1 / -1;
}

.#{$block-class} .#{$block-class}__buttons {
  border-block-start: 1px solid $layer-accent-01;
}

.#{$block-class}__header {
  /* stylelint-disable-next-line max-nesting-depth */
  button:first-of-type {
    background: none;
  }
}