/*

  Meta Component Styles
  ~~~~~~~~~~~~~~~~~~~~~

*/

@import "../../styles/_global/all.scss";

.cabana-meta {
  background: $color-grey-20;
  display: flex;
  flex: 0.5;
  flex-direction: column;
  max-height: 100vh;
  overflow-y: scroll;
  &-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-direction: row;
    padding: 22px;
    @extend %clearfix;
    &-label {
    }
    &-filename {
      display: block;
    }
    &-last-saved {
      color: $color-grey-60;
      font-size: 13px;
      margin-bottom: -5px;
      padding-top: 3px;
    }
    &-actions {
      padding: 18px 0;
    }
    .saveable &-action {
      width: 22%;
      &.special-wide {
        width: 33%;
      }
    }
    &-action {
      float: left;
      padding: 0 1%;
      width: 22%; /* 22% by default. 33.33% for copy via .special-wide */
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
      }
      button {
        width: 100%;
      }
    }
    & .special-wide {
      width: 33%;
    }
  }
  &-messages {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-left: 11px;
    &-header {
      height: 34px;
      padding: 22px 11px;
    }
    &-window {
      background: $color-grey-30;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    &-filter {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      height: 64px;
      padding: 11px;
    }
    &-list {
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      &-item {
        cursor: pointer;
        position: relative;
        transition-duration: 0.1s;
        &-bytes {
          width: 160px;
          &-canvas {
            width: 160px;
            height: 15px;
          }
        }
        &:not(.is-selected):hover {
          background: rgba(0, 0, 0, 0.05);
        }
        &.is-selected {
          background: $color-grey-40;
          font-weight: 600;
        }
      }
    }
  }
  table {
    border-spacing: 0;
    font-size: 12px;
    width: 100%;
    thead tr td:first-child,
    tbody tr td:first-child {
      padding-left: 11px;
    }
  }
}