:host {
  display: flex;
  flex-direction: column;
  padding: 1em;
  gap: 1em;
  position: relative;
  max-height: 90vh;

  header {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .picture-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    max-height: 30em;
    overflow-y: auto;
    min-height: 10em;
    padding: .5em 0;

    img {
      width: 15em;
      height: 10em;
      object-fit: cover;
      border-radius: 1em;
      opacity: .9;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
      transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;

      &:hover {
        cursor: pointer;
        opacity: 1;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
      }
    }
  }

  footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    button {
      padding: .8em 1.2em;
      border-radius: 10em;
      border: none;
      background-color: #3f51b5;
      color: white;
      transition: background-color .2s ease-in-out;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background-color: #5b6ed8;
      }

      &.secondary {
        color: #3f51b5;
        background-color: white;

        &:hover {
          background-color: #f2f4ff;
          cursor: pointer;
        }
      }
    }

    input[type=file] {
      display: none;
    }
  }
}