@import '../../../styles/core.scss';

.StagingFeed {
  display: flex;
  flex-direction: column;

  &_deployed {
    background: get(color 'lightGray');
    border-top: 1px solid get(color 'ivory');
  }

  &-Inner {
    width: 1000px;
  }

  &-Timeline {
    padding: 25px 50px;

    &-Heading {
      width: 200px;
    }

    &-Day {
      display: flex;
      font-size: 14px;
      flex-direction: column;
      width: 100%;

      + .StagingFeed-Timeline-Day {
        border-top: 1px solid get(color 'ivory');
        padding-top: 10px;
      }

      &-Date {
        padding-bottom: 15px;
      }

      &-Owlet {
        margin-bottom: 10px;
        margin-top: 10px;
      }

      &-Deployed {
        position: absolute;
        right: 30px;
        align-items: center;
        background: get(color 'ivory');
        border-radius: 9px;
        color: get(color 'slate');
        display: inline-flex;
        font-size: 13px;
        padding: 10px 15px;
        text-align: center;

        &_empty {
          align-items: center;
          justify-content: center;
          background: get(color 'ivory');
          border-radius: 9px;
          color: get(color 'slate');
          display: inline-flex;
          font-size: 13px;
          padding: 15px;
          text-align: center;
        }

        &-Icon {
          margin-right: 5px;
        }
      }
    }

    &-Content {
      flex: 1 1 auto;
    }
  }
}
