<commit_before>@import 'ui-variables';
@import 'syntax-variables';

@atom-dock-toggle-button-size: 50px;

// Dock --------------

// The actual dock element is used as a kind of placeholder in the DOM, relative
// to which its children can be positioned.
atom-dock {
  display: flex;
  position: relative;
}

.atom-dock-inner {
  display: flex;

  &.bottom { width: 100%; }
  &.left, &.right { height: 100%; }

  // Make sure to center the toggle buttons
  &.bottom { flex-direction: column; }
  align-items: center;

  // Position the docks flush with their side of the editor.
  &.right { right: 0; }
  &.bottom { bottom: 0; }
  &.left { left: 0; }

  // Position the docks flush with their side of the editor.
  &.right { right: 0; }
  &.bottom { bottom: 0; }
  &.left { left: 0; }

  &:not(.atom-dock-open) {
    // The dock should only take up space when it's active (i.e. it shouldn't
    // take up space when you're dragging something into it).
    position: absolute;
    z-index: 10; // An arbitrary number. Seems high enough. ¯\_(ツ)_/¯
  }
}

.atom-dock-mask {
  position: relative;
  background-color: @tool-panel-background-color;
  overflow: hidden; // Mask the content.

  // This shouldn't technically be necessary. Apparently, there's a bug in
  // Chrome whereby the 100% width (in the bottom dock) and height (in left and
  // right docks) won't actually take effect when the docks are given more
  // space because another dock is hidden. Unsetting and resetting the width
  // will correct the issue, as will changing its "display." However, only this
  // seems to fix it without an actual runtime change occurring.
  flex: 1;

  // One of these will be overridden by the component with an explicit size.
  // Which depends on the position of the dock.
  width: 100%;
  height: 100%;

  transition: none;
  &.atom-dock-should-animate {
    transition: width 0.2s ease-out, height 0.2s ease-out;
  }
}

.atom-dock-content-wrapper {
  position: absolute;
  display: flex;
  flex: 1;
  align-items: stretch;
  width: 100%;
  height: 100%;
  cursor: default;
  -webkit-user-select: none;
  white-space: nowrap;

  // The contents of the dock should be "stuck" to the moving edge of the mask,
  // so it looks like they're sliding in (instead of being unmasked in place).
  &.right { left: 0; }
  &.bottom { top: 0; }
  &.left { right: 0; }

  // Use flex-direction to put the resize handle in the correct place.
  &.left { flex-direction: row-reverse; }
  &.bottom { flex-direction: column; }
  &.right { flex-direction: row; }
}

// Toggle button --------------

.atom-dock-toggle-button {
  position: absolute;
  overflow: hidden; // Mask half of the circle.

  // Must be > .scrollbar-content and inactive atom-dock
  z-index: 11;

  // Position the toggle button target at the edge of the dock. It's important
  // that this is absolutely positioned so that it doesn't expand the area of
  // its container (which would block mouse events).
  &.right { right: 100%; }
  &.bottom { bottom: 100%; }<commit_msg>Docks: Don't change inherited presentation styles<commit_after>@import 'ui-variables';
@import 'syntax-variables';

@atom-dock-toggle-button-size: 50px;

// Dock --------------

// The actual dock element is used as a kind of placeholder in the DOM, relative
// to which its children can be positioned.
atom-dock {
  display: flex;
  position: relative;
}

.atom-dock-inner {
  display: flex;

  &.bottom { width: 100%; }
  &.left, &.right { height: 100%; }

  // Make sure to center the toggle buttons
  &.bottom { flex-direction: column; }
  align-items: center;

  // Position the docks flush with their side of the editor.
  &.right { right: 0; }
  &.bottom { bottom: 0; }
  &.left { left: 0; }

  // Position the docks flush with their side of the editor.
  &.right { right: 0; }
  &.bottom { bottom: 0; }
  &.left { left: 0; }

  &:not(.atom-dock-open) {
    // The dock should only take up space when it's active (i.e. it shouldn't
    // take up space when you're dragging something into it).
    position: absolute;
    z-index: 10; // An arbitrary number. Seems high enough. ¯\_(ツ)_/¯
  }
}

.atom-dock-mask {
  position: relative;
  background-color: @tool-panel-background-color;
  overflow: hidden; // Mask the content.

  // This shouldn't technically be necessary. Apparently, there's a bug in
  // Chrome whereby the 100% width (in the bottom dock) and height (in left and
  // right docks) won't actually take effect when the docks are given more
  // space because another dock is hidden. Unsetting and resetting the width
  // will correct the issue, as will changing its "display." However, only this
  // seems to fix it without an actual runtime change occurring.
  flex: 1;

  // One of these will be overridden by the component with an explicit size.
  // Which depends on the position of the dock.
  width: 100%;
  height: 100%;

  transition: none;
  &.atom-dock-should-animate {
    transition: width 0.2s ease-out, height 0.2s ease-out;
  }
}

.atom-dock-content-wrapper {
  position: absolute;
  display: flex;
  flex: 1;
  align-items: stretch;
  width: 100%;
  height: 100%;

  // The contents of the dock should be "stuck" to the moving edge of the mask,
  // so it looks like they're sliding in (instead of being unmasked in place).
  &.right { left: 0; }
  &.bottom { top: 0; }
  &.left { right: 0; }

  // Use flex-direction to put the resize handle in the correct place.
  &.left { flex-direction: row-reverse; }
  &.bottom { flex-direction: column; }
  &.right { flex-direction: row; }
}

// Toggle button --------------

.atom-dock-toggle-button {
  position: absolute;
  overflow: hidden; // Mask half of the circle.

  // Must be > .scrollbar-content and inactive atom-dock
  z-index: 11;

  // Position the toggle button target at the edge of the dock. It's important
  // that this is absolutely positioned so that it doesn't expand the area of
  // its container (which would block mouse events).
  &.right { right: 100%; }
  &.bottom { bottom: 100%; }
{'fraction_non_alphanumeric': 0.12813278008298756, 'fraction_numerical': 0.015933609958506224, 'mean_word_length': 2.818757921419518, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2082957', 'n_tokens_mistral': 2011, 'n_tokens_neox': 1838, 'n_words': 757}