type changes

css/layout/region.css

@@ -25,3 +25,118 @@
     margin-block-end: var(--sp3);
   }
 }
+
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Social Bar Region
+ .
+ */
+
+@media (min-width: 75rem) {
+  .social-bar {
+    flex-shrink: 0;
+    width: var(--content-left);
+    background-color: var(--color--gray-100);
+  }
+}
+
+.social-bar__inner {
+  position: relative;
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+}
+
+@media (min-width: 75rem) {
+  .social-bar__inner {
+    position: relative;
+    width: var(--content-left);
+    padding-block: calc(5 * var(--sp));
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  .social-bar__inner.is-fixed {
+    position: fixed;
+    inset-block-start: var(--sp6);
+    inset-inline-start: 0;
+    height: calc(100vh - 6 * var(--sp));
+  }
+}
+
+.rotate > * {
+  margin-block-end: var(--sp2);
+}
+
+@media (min-width: 75rem) {
+  .rotate > * {
+    display: flex;
+    align-items: center;
+    margin-block-end: 0;
+  }
+
+  .rotate > *:not(:first-child) {
+    margin-inline-end: var(--sp2);
+  }
+}
+
+@media (min-width: 75rem) {
+  .rotate .contextual {
+    inset-inline: 100% auto;
+    transform: rotate(90deg); /* LTR */
+    transform-origin: top left; /* LTR */
+  }
+
+  .rotate .contextual .trigger {
+    float: left; /* LTR */
+
+    /**
+         * Chromium and Webkit do not yet support flow relative logical properties,
+         * such as float: inline-end. However, PostCSS Logical does not compile this
+         * value, so we accommodate by not using these.
+         *
+         * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+         * @see https://github.com/csstools/postcss-plugins/issues/632
+         */
+  }
+  [dir="rtl"] .rotate .contextual .trigger {
+    float: right;
+  }
+}
+
+@media (min-width: 75rem) {
+  .rotate {
+    position: absolute;
+    inset-inline-start: 50%;
+    display: flex;
+    flex-direction: row-reverse;
+    width: 100vh;
+    transform: rotate(-90deg) translateX(-100%); /* LTR */
+    transform-origin: left; /* LTR */
+  }
+
+  @supports (width: max-content) {
+    .rotate {
+      width: max-content;
+    }
+  }
+}
+
+@media (min-width: 75rem) {
+  [dir="rtl"] .rotate {
+    transform: rotate(90deg) translateX(100%);
+    transform-origin: right;
+  }
+
+  [dir="rtl"] .rotate .contextual {
+    transform: rotate(-90deg);
+    transform-origin: top right;
+  }
+}