@import "../../common/constants";

.AttributionWindow {
  .row-container {
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1rem 2rem;

    .row {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      border-bottom: solid 1px #CCC;

      &:last-child {
        border-bottom: none;
      }

      .transparent {
        background: url(../../images/transparent.png) repeat top left;
        background-size: 8px 8px;
        margin-right: 1rem;

        .icon {
          @include icon(4rem);
          filter: none;

          &.black {
            filter: brightness(0%);
          }
        }
      }

      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 1rem;

        .path {
          color: blue;
          text-decoration: underline;
          word-break: break-all;
        }

        .artist {
          flex: 1;

          &:before {
            content: 'by\00a0';
          }
        }
      }

      .link {
        color: blue;
        text-decoration: underline;
        margin-right: 1rem;
      }
    }
  }
}

.mobile .AttributionWindow {
  .row-container {
    .row {
      flex-direction: column;

      .transparent {
        margin-right: 0;
      }

      .info {
        margin-right: 0;
        margin-bottom: 1rem;
        text-align: center;
      }

      .link {
        margin-right: 0;
      }
    }
  }
}
