Takumon/mean-blog

.content {
  position: relative;
  color: #4e4e4e;

  .mat-dialog-content {
    padding-top: 12px;
  }
}


.title {
  font-weight: 100;
  padding: 12px 24px;
  font-size: 24px;
  color: white;
  background: #4051b4;
  margin: -24px -24px 0;
  display: flex;

  &__spacer {
    flex: 1 1 auto;
  }

  &__close-btn {
    cursor: pointer;
    &:hover {
      opacity: 0.6;
    }
    &:focus {
      outline: 0;
    }
  }
}


.user-select {
  display: flex;
  min-height: 400px;
  margin-bottom: 24px;

  &__unselected {
    flex: 1;
    padding-left: 0;

    position: relative;

  }

  &__selected {
    flex: 1;
    padding-right: 0;
  }

  &__title {
    display: flex;
    align-items: center;
  }

  &__list {
    min-height: 400px;
    margin: 8px 36px 8px 0;
    border: 1px solid rgb(224, 224, 224);

    &__search-condition {
      width: 100%;
      padding: 12px;
      box-sizing: border-box;
      margin-top: -12px;
      margin-bottom: -24px;
    }
  }
}



.data-wrapper {
  margin: 2px 0 60px;
  width: 100%;
  padding: 0;

  $parent: &;

  &_date-search-pattern {
    @extend #{$parent};
    display: flex;
    align-items: center;
    margin-top: 12px;

    &__factor {
      margin-right: 12px;

      &__calendar {
        cursor: pointer;
        &:hover {
          background: rgb(243, 235, 235);
        }
      }
    }

    button {
      height: 36px;
      width: 36px;
    }
  }
}

.data-label {
  display: flex;
  margin-bottom: 12px;
  font-weight: bold;

  &__spacer {
    flex: 1 1 auto;
  }

  div {

  }
}

.data {
  width: 100%;
}

.users {
  color: gray;

  &__count {

  }

  &__count-unit {
    font-size: 0.7em;
  }
}

.user {

  &__content {
    display: flex;
    align-items: center;
    padding: 2px;
    color: gray;
    cursor: pointer;
    width: 100%;

    .show-when-hover {
      color: transparent;
    }

    &:hover {
      background: rgb(241, 227, 238);

      .show-when-hover {
        color: gray;
      }

    }

    &__icon {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      margin-right: 12px;
      box-sizing: border-box;
      box-shadow: #2f2f2f 0 0 1px 0;
    }

    &__userId {
      flex: 1 1 auto;
    }

  }
}

.clear-icon {
  color: #b9b9b9;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 12px;

  &:hover {
    color: rgb(235, 147, 147);
    background: rgb(241, 224, 224);
  }
}

.operation {
  display: flex;
  margin-right: -24px;
  margin-left: -24px;
  padding-right: 24px;
  padding-left: 24px;
  border-top: 1px solid #d6d6d6;
  background: #f7f7f7;
}