// component styles are encapsulated and only applied to their components
.control-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  background-color: #eee;
  color: #222;
}

.loading-badge {
  text-align: center;
  font-size: 20px;
  position: relative;
  top: calc(50% - 10px);
}

.auth-error {
  text-align: center;
  position: relative;
  height: 300px;
  top: calc(50% - 150px);
  color: #bd362f;
}

.sticker-picker {
  margin: 15px 15px 30px;

  .sticker-pack {
    .header {
      margin-top: 15px;
      margin-left: 3px;

      .title {
        font-weight: 700;
        color: #222222;
      }

      .license {
        font-size: 0.6em;
        font-weight: 300;
        color: #b5b5b5;
        margin-top: 3px;
        float: right;

        a {
          color: #b5b5b5;
        }
      }

      .author {
        font-size: 0.6em;
        font-weight: 300;
        color: #222222;
        display: block;

        a {
          color: #222222;
        }
      }
    }

    .stickers {
      display: flex;
      flex-wrap: wrap;

      .sticker {
        padding: 5px;
        margin: 2px;
        cursor: pointer;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.2);
      }
    }
  }
}