@import "~styles/mixins";
@import '~styles/adminMixins';

.ManageRoom {
  padding: 30px;

  .header {
    border-bottom: 1px solid $color-grey;
    padding-bottom: 10px;

    .left {
      .room-item {
        font-size: 20px;
        display: flex;
        font-weight: bold;
      }

      .count {
        font-size: 12px;
        display: flex;
      }
    }
  }

  .member-container {
    .member-title {
      font-size: 12px;
      font-weight: 800;
      text-align: left;
      padding: 20px 0 15px;
      text-transform: uppercase;
      display: flex;
      align-items: center;

      .action-item {
        cursor: pointer;
        margin-left: 10px;
        width: 24px;
        height: 24px;
        background-color: rgba($color: $color-blue, $alpha: 0.6);
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;

        .action-icon {
          color: white;
          font-size: 10px;
        }
      }
    }

    .add-form {
      padding-bottom: 20px;
    }

    .member-list {
      .member {
        display: flex;
        align-items: center;
        padding-bottom: 15px;

        .info {
          text-align: left;
          font-size: 15px;

          .name {
            font-weight: bold;
          }

          .email {
            font-size: 12px;
          }
        }

        .actions {
          flex-grow: 1;
          display: flex;
          justify-content: flex-end;

          .action-item {
            cursor: pointer;
            margin-left: 10px;
            width: 24px;
            height: 24px;
            background-color: rgba($color: $color-red, $alpha: 0.6);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;

            .action-icon {
              color: white;
              font-size: 10px;
            }
          }
        }

        .icon {
          margin-right: 10px;
          width: 35px;
          height: 35px;
          background-color: $color_user_background;
          border-radius: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-position: center;
          background-size: cover;

          .circle {
            color: white;
            font-size: 20px;
            position: relative;
            left: 0.5px;
          }
        }
      }
    }
  }
}

.input {
  background-color: rgba($color: $color-grey, $alpha: 0.2);
  padding: 5px 10px;
  border-radius: 4px;
  width: 100%;
}
