@import '../style/mixins';
@import '../style/colors';

.entry-index {
  .page-header {
    display: flex;
    flex-wrap: wrap;
    height: 50px;

    .left-side {
      height: 50px;
      margin-right: 50px;
      width: 208px;
    }

    .right-side {
      flex-grow: 1;

      .page-tools {
        align-items: center;
        display: flex;
        height: 50px;
        justify-content: space-between;
        margin-bottom: 0;
        padding: 0 15px;

        @include themify(day) {
          border-bottom: 1px solid $white-four;
        }

        @include themify(night) {
          border-bottom: 1px solid $dark-two;
        }

        .filter-select {
          align-items: center;
          cursor: pointer;
          display: flex;
          font-size: 16px;
          font-weight: 500;
          height: 100%;

          @include themify(day) {
            color: $dark-sky-blue;
          }

          @include themify(night) {
            color: $pastel-blue;
          }

          .label {
            margin-right: 4px;
          }
        }

        &.loading {
          border-bottom: 0;
          height: 49px;
        }
      }
    }
  }

  .page-inner {
    height: calc(100% - 50px);
    overflow-y: auto;

    .left-side {
      float: left;
      margin-right: 50px;
      width: 208px;
      .tag-list {
        padding-left: 50px;
        padding-top: 34px;

        .tag-list-header {
          font-size: 18px;
          font-weight: 700;
          margin: 0 0 31px 0;
        }

        .tag-list-item {
          border-radius: 25px;
          color: $silver;
          display: table;
          margin-bottom: 8px;
          padding: 4px 12px;
          text-decoration: none;
          transition: 0.5s;

          @include themify(day) {
            background: $white;
            border: solid 1px $white-four;
          }

          @include themify(night) {
            background: $dark-grey-blue;
            border: solid 1px $dark-two;
          }

          &.selected-item {
            color: $dark-sky-blue;
            pointer-events: none;
          }

          &:hover {
            @include themify(day) {
              background: darken($white, 4);
            }

            @include themify(night) {
              background: darken($dark-grey-blue, 4);
            }
          }
        }
      }
    }

    .right-side {
      float: right;
      margin-top: 12px;
      width: calc(100% - 258px);
      .entry-list {
        .entry-list-body.grid-view {
          align-content: stretch;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          padding-right: 10px;
        }
      }
    }
  }
}
