@use '../../style/theming';

// MARK: Variables
$two-column-left-width-var: theming.$two-column-left-width-var;
$two-column-left-width: theming.$two-column-left-width;
$two-column-navbar-height: theming.$content-navbar-height;
$two-columns-right-padding-size: var(--dbx-padding-2);

// MARK: Mixin
@mixin core() {
  /// @dbx-utility two-column
  /// @intent two-column page layout — fixed-width left column divided from the right content area by a border
  /// @role layout
  .dbx-two-column {
    height: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;

    // Top boundary separating the two-column block from the page header above it.
    // Uses the shared divider token; apps can disable or restyle the boundary by
    // overriding --dbx-two-column-border-top (e.g. to `none`).
    box-sizing: border-box;
    border-top: var(--dbx-two-column-border-top, 1px solid var(--dbx-divider-color));

    .dbx-content-container {
      margin: 0;
    }

    .left-column {
      /// Color of the right boundary separating the fixed left column from the right content
      /// area (replaces the former elevation shadow). Column-specific override point; defaults
      /// to the shared --dbx-divider-color. Retint just this boundary by overriding it, or set
      /// it to `transparent` to hide the divider while keeping the layout box.
      /// @role color
      /// @intent two column divider color, two column border color, left column separator color
      border-right: 1px solid var(--dbx-two-column-border-color, var(--dbx-divider-color));

      width: $two-column-left-width;
      flex: 0 0 auto;

      overflow: auto;
    }

    .right-column {
      flex: 1 1 auto;
      max-width: calc(100% - #{$two-column-left-width});
      overflow: hidden;

      .two-column-reverse-sizing & {
        max-width: $two-column-left-width;
      }
    }

    &.full-left {
      .left-column {
        width: 100% !important;
      }
    }

    &.right-shown {
      .left-column {
        width: $two-column-left-width;
      }
    }

    &.hide-left-column {
      .left-column {
        display: none;
      }

      .right-column {
        max-width: 100%;
      }
    }
  }

  .dbx-two-column.two-column-reverse-sizing {
    .left-column {
      width: calc(100% - #{$two-column-left-width});
      overflow: hidden;
    }

    .right-column {
      max-width: $two-column-left-width;
    }

    &.hide-left-column {
      .right-column {
        max-width: 100%;
      }
    }
  }

  .dbx-two-column-head {
    padding: 0 var(--dbx-padding-2); // only padded on the left
    border-bottom: 1px solid var(--dbx-divider-color);
    height: $two-column-navbar-height;

    display: flex;
    align-items: center;
    overflow-y: hidden;

    &.full {
      padding: 0;
    }
  }

  .dbx-two-column-right {
    height: 100%;

    > .dbx-two-column-head {
      .back-button {
        margin-right: $two-columns-right-padding-size;
      }

      .right-spacer {
        padding-right: 5vw;
      }

      .side-spacer {
        padding-left: $two-columns-right-padding-size;
      }
    }

    .dbx-two-column-right-content {
      height: calc(100% - #{$two-column-navbar-height});
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}

@mixin responsive($theme-config) {
  .dbx-two-column {
    @include theming.if-small-screen($theme-config) {
      .left-column {
        width: 100% !important;
      }

      .right-column {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
      }
    }
  }

  .dbx-two-column.right-shown {
    @include theming.if-small-screen($theme-config) {
      .left-column {
        display: none;
      }
    }
  }
}

@mixin theme($theme-config) {
  @include responsive($theme-config);
}