// Styles for /admin/backups

$rollback: #3d9970;
$rollback-dark: darken($rollback, 10%) !default;
$rollback-darker: darken($rollback, 20%) !default;
.btn-rollback {
  color: var(--secondary);
  background: $rollback;
  .d-icon {
    color: var(--secondary);
  }
  &:hover {
    background: $rollback-dark;
    .d-icon {
      color: currentColor;
    }
  }
  &:active {
    @include linear-gradient($rollback-darker, $rollback-dark);
  }
  &[disabled] {
    background: $rollback;
  }
}

.admin-backups {
  table {
    @media screen and (min-width: 550px) {
      td.backup-filename {
        grid-column-start: 1;
        grid-column-end: 6;
      }
      td.backup-size {
        grid-column-end: -1;
        text-align: right;
      }
      td.backup-controls {
        margin-top: 0.25em;
        grid-row: 2;
        grid-column-start: 1;
        grid-column-end: 5;
        text-align: right;
        .btn {
          margin-top: 0.25em;
        }
      }
    }
    @include breakpoint(mobile-extra-large) {
      td.backup-filename {
        grid-column-start: 1;
        grid-column-end: 3;
      }
      td.backup-size {
        text-align: right;
      }
      td.backup-controls {
        grid-column-start: 1;
        grid-column-end: 4;
      }
    }
    @include breakpoint(tablet) {
      td.backup-controls {
        text-align: left;
      }
    }
  }
}

.admin-backups-logs {
  max-height: 65vh;
  overflow: auto;
}

button.ru {
  position: relative;
  min-width: 110px;
}

.ru-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(0, 175, 0, 0.3);
}

.is-uploading:hover .ru-progress {
  background: rgba(200, 0, 0, 0.3);
}

.start-backup-modal {
  .alert {
    margin-bottom: 0;
  }
}

.backup-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .btn {
    margin-right: 0.5em;
  }
  .backup-message {
    margin-left: auto;
    @include breakpoint(mobile-extra-large) {
      margin: 1.25em 0 0;
    }
  }
}