.import-setup {
  background: #fff;
  padding: 0;
  margin: 20px auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.13);
  color: #555;
  text-align: left;
  max-width: 700px;
  font-size: 14px;
  header {
    padding: 30px 20px;
    border-bottom: 1px solid #eee;
    h2 {
      font-size: 24px;
      font-weight: 400;
      margin: .5em 0;
    }
    p {
      line-height: 1.75em;
      font-size: 16px;
      color: #555;
      margin: 0;
    }
  }
  &__begin {
    padding: 30px 20px;
    p {
      font-size: 14px;
    }
  }
  &__process {
    padding: 20px 20px;
    display: none;
    p {
      font-size: 14px;
    }
    dl {
      display: grid;
      grid-template-columns: 1fr 140px;
      gap: 0;
      width: 100%;
      height: 100%;
      margin: 0 0 16px;
      dd,
      dt {
        margin: 0;
        padding: 16px 0;
        &:not(:last-child):not(:nth-last-child(2)) {
          border-bottom: 1px solid #eee;
        }
      }
      dd {
        text-align: right;
      }
    }
    .status_cache_dir,
    .status_cache,
    .status_import {
      position: relative;
      font-weight: 500;
      &.success {
        color: #00851f;
        &:before {
          font-family: dashicons;
          content: "\f12a";
          display: block;
          position: absolute;
          top: 0;
          left: -24px;
          font-size: 20px;
        }
      }
    }
    .progress {
      margin-bottom: 10px;
      progress {
        background-color: #f3f3f3;
        border: 0;
        width: 100%;
        height: 26px;
        border-radius: 4px;
        padding: 2px;
        -webkit-appearance: none;
        appearance: none;
        &::-webkit-progress-bar {
          background-color: #f3f3f3;
          border-radius: 4px;
        }
        &::-webkit-progress-value {
          background: #2271b1;
          border-radius: 4px;
        }
        &::-moz-progress-bar {
          background: #2271b1;
          border-radius: 4px;
        }
      }
    }
  }
  &__done {
    display: none;
    padding: 30px 20px;
    text-align: center;
    .dashicons.dashicons-yes-alt {
      color: #00851f;
      font-size: 120px;
      width: 120px;
      height: 120px;
    }
    p {
      font-size: 14px;
    }
    h3 {
      margin-bottom: 0px;
    }
  }
  footer {
    padding: 20px;
    border-top: 1px solid #eee;
  }
}


@keyframes slide {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 113px;
  }
}