$boardMenuBgc: #f4f5f7;
$menuDiveders: #091e4221;

.board-wrapper.is-show-menu .board-menu {
   box-shadow: 0 12px 24px -6px #091e4240, 0 0 0 1px #091e4214;
   transform: translateX(0);
}

.board-menu {
   &,
   .board-menu-container {
      position: absolute;
      bottom: 0;
      right: 0;
      top: 0;
   }

   background-color: $boardMenuBgc;

   transform: translateX(339px);
   transition-duration: 0.3s;
   transition-property: transform, width;
   transition-timing-function: ease-in;
   width: 339px;
   z-index: 10;

   .user-avatar:hover {
      background-color: #c1c7d0;
      cursor: pointer;
   }
}

.board-menu-container {
   display: flex;
   flex-direction: row;
   left: 0;
}

.board-menu-tab-content {
   display: flex;
   align-items: flex-start;
   flex: 1;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: flex-start;
   overflow: hidden;

   background-color: $boardMenuBgc;
}

.board-menu-header {
   &.is-in-frame {
      opacity: 1;
      overflow: hidden;
   }
   box-sizing: border-box;
   flex: 0 0 auto;
   height: 49px;
   padding: 0 6px 0 12px;
   position: relative;
   width: 100%;

   .board-menu-header-content {
      display: flex;
      align-items: center;
      flex-direction: row;

      .board-menu-header-back-button {
         font-size: 20px;
         left: 12px;
         overflow: hidden;
         position: absolute;
         top: 8px;
         transition: transform 0.12s ease-in;

         &::before {
            content: '\e90a';
         }
      }

      .board-menu-header-title {
         flex: 1;
         line-height: 20px;
         margin: 14px 32px;
         overflow: hidden;
         text-align: center;
         text-overflow: ellipsis;
         transition: margin 0.12s ease-in;
         white-space: nowrap;
      }

      .board-menu-header-close-button {
         font-size: 20px;
         position: absolute;
         right: 6px;
         top: 8px;

         &::before {
            content: '\e91c';
         }
      }
   }

   &.is-board-menu-default-view .board-menu-header-back-button {
      transform: translateX(-42px);
   }

   .board-menu-header-divider {
      margin: 0;
      background-color: $menuDiveders;
   }
}

.board-menu-navigation-item-block,
.board-menu-navigation-item-link {
   padding: 6px 6px 6px 40px;
   position: relative;
}

.board-menu-content {
   box-sizing: border-box;
   display: flex;
   flex: 1 1 auto;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 12px 6px 12px 12px;
   width: 100%;

   .board-menu-content-container {
      flex: 1 auto;
      transform: translateX(0);
      transition-duration: 0.12s;
      transition-property: transform, opacity;
      transition-timing-function: ease-in;
      width: 100%;
   }

   .show-more {
      border-radius: 3px;
      clear: both;
      color: #5e6c84;
      display: block;
      margin-top: 16px;
      padding: 16px 8px 16px 40px;
      text-decoration: underline;

      &:hover {
         background-color: #091e4214;
         text-decoration: underline;
      }
   }
}

.board-menu-navigation {
   margin: 4px 0;

   .board-menu-navigation-item {
      cursor: pointer;

      &.mod-background .board-menu-navigation-item-link-icon {
         background-position: 50%;
         background-size: cover;
         border-radius: 3px;
      }

      .board-menu-navigation-item-link {
         border-radius: 3px;
         display: block;
         font-weight: 600;
         line-height: 20px;
         text-decoration: none;

         &:not(.disabled):hover {
            background-color: #091e4214;
         }

         .board-menu-navigation-item-link-icon {
            font-size: 20px;
            height: 20px;
            left: 12px;
            line-height: 20px;
            position: absolute;
            top: 6px;
            width: 20px;

            &.icon-board::before {
               content: '\e90b';
            }
            &.icon-overflow-menu-horizontal::before {
               content: '\e952';
            }
            &.icon-label::before {
               content: '\e93f';
            }
            &.icon-archive::before {
               content: '\e907';
            }
         }

         .board-menu-navigation-item-link-summary {
            color: #5e6c84;
            font-weight: 400;

            &.board-menu-about-this-board-summary {
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
            }
         }
      }
   }
}

.board-menu-section-header {
   border-radius: 3px;
   display: block;
   line-height: 20px;
   padding: 6px 6px 6px 40px;
   position: relative;
   text-decoration: none;

   &:hover {
      background-color: #091e4214;
   }

   .board-menu-section-header-icon {
      font-size: 16px;
      height: 20px;
      left: 9px;
      line-height: 20px;
      position: absolute;
      top: 6px;
      width: 20px;

      &.icon-activity::before {
         content: '\e900';
      }
   }

   .board-menu-section-header-title {
      font-weight: 700;
   }

   .board-menu-section-header-count {
      background-color: #091e4214;
      border-radius: 20px;
      color: #5e6c84;
      font-size: 12px;
      line-height: 20px;
      padding: 2px 10px;
      position: absolute;
      right: 4px;
      top: 4px;
      text-align: center;

      &:empty {
         display: none;
      }
   }
}

.activity-meta a.date:hover,
.activity-meta a.quiet:hover {
   text-decoration: underline;
}
.quiet a:not(.disabled):hover {
   color: #172b4d;
}
.activity-meta a.date,
.activity-meta a.quiet {
   text-decoration: none;
}
.quiet,
.quiet a {
   color: #5e6c84;
}

.u-font-weight-bold {
   font-weight: 700;
}

.inline-member {
   cursor: pointer;
}

.menu-activity {
   margin-left: 40px;
   min-height: 32px;
   padding: 8px 0;
   position: relative;

   .activity-creator {
      height: 32px;
      left: -40px;
      position: absolute;
      top: 8px;
      width: 32px;
   }

   .activity-desc {
      display: block;
      word-wrap: word-break;
      margin: 0;
   }

   .activity-date {
      line-height: 14px;
      margin: 0 0 6px;
      min-height: 105px;
      font-size: 12px;
      font-weight: 400;
      white-space: pre;
   }
}

.board-backgrounds-section-tiles {
   overflow-y: hidden;
}

.board-backgrounds-section-tile {
   box-sizing: border-box;
   cursor: pointer;
   float: left;
   padding: 0 4px;
   position: relative;
   text-align: center;
   width: 50%;
}

.icon-organization-visible:before {
   content: '\e951';
}

.board-backgrounds-section-tile.board-backgrounds-section-tile-large {
   width: 50%;
}

.board-backgrounds-section-tile.board-backgrounds-section-tile-large .image {
   height: 96px;
}

.board-backgrounds-section-tile .image {
   background-color: #dfe1e6;
   background-size: cover;
   border-radius: 8px;
   height: 96px;
   margin-bottom: 8px;
   width: 100%;
}

.board-backgrounds-section-tile .image:hover {
   opacity: 0.7;
}

.board-background-select .background-box:hover {
   cursor: pointer;
   opacity: 0.8;
}

.board-backgrounds-photos {
   display: flex;
   flex-direction: column;
   height: 100%;
   left: 0;
   overflow: hidden;
   position: absolute;
   text-align: center;
   top: 0;
   width: 100%;
}

.board-backgrounds-photos .board-backgrounds-list-observer {
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
   position: relative;
}

.board-backgrounds-list-observer {
   font-size: 0;
   margin: 0 -4px 8px;
}

.board-background-select {
   border-radius: 8px;
   box-sizing: border-box;
   display: inline-block;
   padding: 0 4px 8px;
   position: relative;
   text-align: left;
   vertical-align: top;
   width: 50%;
   z-index: 1;
}

.board-menu-content input[type='search'],
.board-menu-content input[type='text'] {
   background: #fafbfc;
   width: 100%;
}

.icon-search:before {
   content: '\e960';
}

.board-backgrounds-photos .search-photos .icon-search {
   left: 8px;
   position: absolute;
   top: 8px;
}

.board-backgrounds-photos .search-photos {
   margin: 1px;
   position: relative;

   & input[type='text'] {
      -webkit-appearance: none;
      background-color: #fafbfc;
      border: none;
      border-radius: 3px;
      box-shadow: inset 0 0 0 2px #dfe1e6;
      box-sizing: border-box;
      display: block;
      line-height: 20px;
      margin-bottom: 12px;
      outline: none;
      padding: 8px 12px;
      transition-duration: 85ms;
      transition-property: background-color, border-color, box-shadow;
      transition-timing-function: ease;
      padding-left: 32px;
   }
}

.board-background-select .background-box {
   background-color: #dfe1e6;
   background-size: cover;
   border-radius: 8px;
   display: block;
   height: 96px;
   overflow: hidden;
   position: relative;
   width: 100%;
}
