.version-select {
  margin-top: 1rem;
  font-size: 1.3rem;

  .update-frequency-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    a {
      @include action-link;

      &:not(:link) {
        cursor: inherit;
        color: $text-muted;
      }
    }

    .last-checked {
      @include content-2;
      color: $text-muted;
    }
  }

  .version-row {
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .version-item {
    font-size: 1.3rem;
    color: $brand-text--dark;
    display: flex;
    align-items: flex-end;

    .no-versions {
      margin-left: 0.5rem;
    }

    button {
      // button looks like a link
      border: 0;
      margin: 0;
      padding: 0;
      display: inline;
      background: inherit;
      font: inherit;
      color: $workspace-action;
      font-weight: bold;
      cursor: pointer;
      margin-left: 0.5rem;

      &:hover {
        color: $link-hover-success;
      }
    }
  }

  .version-row > button {
    // fetch button
    @include action-button;
    @include button-blue;

    .spinner {
      $spinner-color: $brand-orange;
      position: absolute !important;

      // overlap into the border's margin. There's tons of room because we use
      // rounded buttons and the spinner is also round
      // https://projects.lukehaas.me/css-loaders/
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background: #ffffff;
      background: -moz-linear-gradient(
        left,
        $spinner-color 10%,
        rgba($spinner-color, 0) 42%
      );
      background: -webkit-linear-gradient(
        left,
        $spinner-color 10%,
        rgba($spinner-color, 0) 42%
      );
      background: -o-linear-gradient(
        left,
        $spinner-color 10%,
        rgba($spinner-color, 0) 42%
      );
      background: linear-gradient(
        to right,
        $spinner-color 10%,
        rgba($spinner-color, 0) 42%
      );
      position: relative;
      -webkit-animation: spinner-in-button 1.4s infinite linear;
      animation: spinner-in-button 1.4s infinite linear;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);

      &::before {
        width: 50%;
        height: 50%;
        background: $spinner-color;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
      }

      &::after {
        background: $brand-orange--light;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }
    }

    &[disabled] {
      @include button-orange;
      color: transparent; // no text
      background-color: $brand-orange--light;
    }
    &:hover .spinner::after {
      background-color: $brand-orange--light;
    }
  }
}

.update-frequency-modal {
  @include content-1; // because body font-size is 10px
  $indent: rem(3);

  .modal-content .modal-body {
    position: relative; // for .saving
    padding-top: 2.25rem; // an extra .5rem for .saving. There's a .25rem overlap over the padding of the elements beneath
  }

  .saving {
    position: absolute;
    color: $text-muted;
    top: 0;
    left: 0;
    padding: .25rem $modal-inner-hpadding;
    width: 100%;
    background: white;

    &.save-failed {
      background: $error-prompt--Vlight;
    }

    button {
      @include action-link;
      margin-left: 1rem;
    }
  }

  .warn-cannot-undo-decrease {
    margin-left: -$modal-inner-hpadding;
    margin-right: -$modal-inner-hpadding;
    padding: .5rem $modal-inner-hpadding;
    margin-bottom: 1.5rem;
    background: $brand-orange--light;
    color: $dark-orange;
  }

  .autofetch-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;

    * {
      display: inline-block;
    }

    div.toggle {
      @include toggle-slider;
      width: $indent;
    }

    label.onoff {
      cursor: pointer;
      margin: 0;
      @include title-2;

      &.on {
        color: $primary;
      }
    }

    .need-upgrade, .over-limit {
      margin-left: rem(1);
    }
  }

  fieldset.fetch-interval {
    margin-top: 1.5rem;
    padding-left: $indent;

    &:disabled {
      color: $text-muted;
    }

    select {
      @include custom-select;
      width: auto;
      padding-right: badrem(3);
      margin-top: badrem(.5);
    }
  }

  .email-updates-tip {
    margin-top: 1.5rem;
  }

  .modal-footer {
    align-items: top;

    h6 {
      margin: 0;
      font: inherit;

      &::after {
        // Add no-text placeholder to size the same as .usage's .counts+.help
        content: '​';
        display: block;
        @include content-1;
        visibility: hidden;
      }
    }

    .usage {
      text-align: center;

      .counts {
        font-weight: bold;

        &.over-limit {
          color: $brand-orange;
        }
      }
    }

    .usage {
      flex: 1 1 auto;

      .help {
        color: $text-muted;
      }
    }

    a {
      @include action-button;
      @include button-blue--fill;
    }

    button.close {
      @include action-button;
      border: 1px solid $brand-text--dark;
      color: $brand-text--dark;
    }
  }
}
