@import 'variables';

.channeldetails {
  .channeldetails__name {
    font-family: $helvetica;
    font-size: 48px;
  }

  .channeldetails__description {
    font-family: $helvetica;
    color: $dark-gray;
  }

  // channel users
  .channeldetails__user {
    a {
      padding: 0 4px !important;
      border-radius: 3px;
      background: white;
    }
    padding: 2px 0;
    margin-bottom: 10px;
    .channeldetails__userprofileimage {
      height: 25px;
      width: 25px;
      margin-right: 6px;
      border-radius: 20px;
      vertical-align: -6px;
    }
    a {
      font-family: $helvetica;
    }
  }

  .channeldetails__inviteusers {
    h2 {
      font-family: $helvetica;
    }

    // find users
    input {
      border-radius: 3px;
      border: 1px solid #dbdbdb;
      box-sizing: border-box;
      padding: 8px;
      margin-left: 2px;
      font-size: 18px;
      -webkit-appearance: none;
    }

    .channeldetails__searchresults {
      padding: 5px 0;

      .channeldetails__searchedusers {
        padding: 1px 0;

        // profile pic
        img {
          height: 22px;
          width: 22px;
          margin-right: 6px;
          border-radius: 20px;
          vertical-align: -6px;
        }

        a {
          font-size: 14px;
          font-family: $helvetica;
        }

        // invite button
        button {
          width: 45px;
          height: 24px;
          background-color: $purple;
          border-radius: 3px;
          color: $white;
        }

        // in channel message
        span {
          color: $dark-gray;
          font-size: 14px;
          font-family: $helvetica;
        }
      }
    }

    .channeldetails__pendingusers {
      a {
        font-size: 18px;
        font-family: $helvetica;
      }
    }
  }

  .channeldetails__leavechannel {
    // Danger Zone
    h2 {
      color: $red;
      font-family: $helvetica-condensed;
      font-size: 2.5em;
    }
    // leave channel
    button {
      width: 180px;
      padding: 3px 0px;
      border-radius: 3px;
      background-color: $red;
      color: $white;
      font-size: 1.2em;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .channeldetails__leftchannel {
    h2 {
      font-family: $helvetica;
      font-size: 32px;
    }
    h3 {
      font-family: $helvetica;
      font-size: 18px;
    }
    h4 {
      font-family: $helvetica;
      font-size: 18px;
    }
    p {
      font-family: $helvetica;
    }
  }
}
