/* ---- Data Module: data versions box */
.data-versions-modal {
  font-size: 1.4rem;

  .modal-content .modal-body {
    overflow: visible; // why do we have an "overflow: scroll" somewhere in our CSS?
    padding-bottom: 0;
  }

  ol {
    margin: -2rem -2.5rem 0 -2.5rem;
    padding: 0;
    list-style: none;
    min-height: 10rem;
    max-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
    color: $brand-text--dark;
    background: white;

    li {
      display: block;
    }

    label {
      display: flex;
      padding: 1rem 2rem;
      margin: 0;

      &:not(.selected) {
        cursor: pointer;
        &:hover {
          background: $hover-background;
        }
      }

      &.selected {
        color: white;
        background: $brand-workspace;
      }

      input {
        display: none;
      }

      time {
        flex: 1 1 auto;
      }
    }
  }

  .modal-footer {
    display: flex;

    form.notifications {
      display: flex;
      margin: 0;
      border-right: 1px solid $Vlight-gray;

      .text {
        flex: 1 1 auto;

        p:last-child {
          margin-bottom: 0;
        }
        .status {
          font-size: 1.6rem;
          display: flex;
          align-items: center;

          .on {
            color: $brand-workspace;
          }

          i {
            margin-top: 0rem;
            margin-right: 0.5rem;
          }

          .icon-notification {
            color: $brand-workspace;
          }
          .icon-no-notification {
            color: $brand-red;
          }
          strong {
            text-transform: uppercase;
            margin-left: 0.5rem;
          }
        }
      }

      .options {
        flex: 0 0 auto;
        align-self: center;
        margin-left: 2rem;

        label {
          @include action-button;
          @include button-gray;
          margin-bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 8.5rem;
          white-space: nowrap;
          background: transparent;

          input[type='checkbox'] {
            display: none;
          }
        }
      }
    }

    .actions {
      flex: 0 0 auto;

      button {
        @extend .action-button;
        @extend .button-blue;
      }
    }
  }
}
