@include export-module('co-layout-selection-layout') {
  .co-layout-selection {
    font-family: $sc-co-layout-selection-font-family;
    font-size: $sc-co-layout-selection-font-size;
    .layout-selection-wrapper {
      cursor: pointer;
      user-select: none;
      display: flex;
      flex-direction: column;
      row-gap: $sc-co-layout-selection-row-gap;
      border-style: $sc-co-layout-selection-border-style;
      border-width: $sc-co-layout-selection-border-width;
      border-radius: $sc-co-layout-selection-border-radius;
      padding: $sc-co-layout-selection-padding;
      background: $sc-co-layout-selection-background;
      .layout-description {
        font-size: $sc-co-layout-selection-description-font-size;
        font-weight: $sc-co-layout-selection-description-font-weight;
      }
    }
    .layouts-wrapper {
      position: absolute;
      transform-origin: bottom center;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      z-index: 1;
      row-gap: $sc-co-layout-selection-selections-row-gap;
      box-shadow: $sc-co-layout-selection-selections-shadow;
      padding: $sc-co-layout-selection-selections-padding;
    }
    .layouts-wrapper-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .co-icon {
        width: 12px;
        height: 12px;
      }
    }
  }
}
