.h5p-metadata-author-widget {
  display: flex;
  flex-direction: column;
  border: solid 1px #ced6e3;
  border-radius: 0.208em;
  width: 100%;
  padding: 1em;
  margin-top: 1em;

  .h5p-save-author {
    border: solid 2px #0a715e;
    color: #fff;
    background-color: #0a715e;
  }
  .h5p-save-author:hover {
    border-color: #0d826c;
    color: #fff;
    background-color: #0d826c;
  }
  .h5p-save-author:active {
    border-color: #095345;
    color: #fff;
    background-color: #095345;
  }

  .h5p-author-data {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    &>.field {
      margin-bottom: 0;
    }
  }

  .field-name-name {
    flex-grow: 1;
    margin-right: 2%;
    overflow: hidden;
    white-space: nowrap;
    min-width: 49%;
  }

  .field-name-role {
    margin-top: 0;
    margin-right: 2%;
    width: 25%;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
  }

  .authorList {
    margin-top: 1.5em;
    white-space: nowrap;

    li {
      display: inline;
      margin-right: 0.5em;

      span {
        margin-right: 1em;
        font-style: italic;
      }
    }
  }

  .h5p-author-list-wrapper {
    margin-top: 0.5em;

    ul {
      margin: 0;
      padding: 0;
    }

    li {
      display: inline-block;
      margin-right: 2em;
      list-style: none;
      font-weight: bold;
      font-size: 0.8em;
    }

    .h5p-metadata-role {
      font-style: italic;
      margin: 0 0.6em;
      font-weight: normal;
      font-size: 0.85em;
      color: #757575;
    }

    button {
      &:after {
        font-family: 'h5p-metadata-icons';
        content: "\e902";
        font-size: 1em;
        position: relative;
        top: -0.1em;
      }
    }
  }
}