/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@layer baklava.base {
  .util-layout-decorator {
    overflow: hidden; // Note: either `hidden` or `scroll` is required for `resize` to work
    
    padding: var(--bk-focus-outline-width); // Add some spacing so as not to cut off any focus outlines
    
    --util-layout-decorator-size: 80ch;
    &.util-layout-decorator--x-small { --util-layout-decorator-size: 40ch; }
    &.util-layout-decorator--small { --util-layout-decorator-size: 60ch; }
    &.util-layout-decorator--medium { --util-layout-decorator-size: 80ch; }
    &.util-layout-decorator--large { --util-layout-decorator-size: 100ch; }
    &.util-layout-decorator--x-large { --util-layout-decorator-size: 140ch; }
    
    inline-size: min(100cqi - 5em, var(--util-layout-decorator-size));
    
    &.util-layout-decorator--resizable {
      padding-block-end: 10px; // Make space for the resize control in the corner
    }
    
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}
