@import 'variables';
@import 'mixins';
@import 'functions';
$input-width: 650px;

.github-repos {
  max-height: 400px;
  overflow-y: auto;
  background: var(--card-bg);
  box-shadow: $shadow;
  &.loading-repos {
    height: 400px;
    background: white url(image-src('loading-ellipsis.svg')) no-repeat center
      center;
    background-size: 50px;
  }
  &.github-repos-errored {
    height: 400px;
  }
  .github-repo-row {
    background: var(--card-bg);
    padding: 12px;
    margin: 5px 0px;
    transition: all 0.6s ease;
    &:hover {
      color: #0f0f0f;
      background: $light-green;
      button {
        background: #a8f1e9;
      }
    }
    &.github-repo-row-selected {
      background: $light-green;
      color: #0f0f0f;
    }
    .github-repo-row-name {
      font-weight: bold;
      form {
        display: block;
        float: right;
      }
      button,
      a[role='button'] {
        transition: all 0.4s ease;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: bold;
        width: 130px;
        background: white;
        border: 0px solid;
        border-radius: 3px;
        padding: 3px 0px;
        margin-top: -5px;
        float: right;
        min-height: 28.5px;
        &:hover,
        &:focus {
          background: $green;
          &.danger-button {
            background: $red;
          }
        }
        &:disabled {
          cursor: wait;
          background: white url(image-src('loading-ellipsis.svg')) no-repeat
            center center;
          background-size: 75px;
        }
        a {
          color: $black;
        }
      }
      &.response-template-row-name {
        button,
        a[role='button'] {
          width: 80px;
          margin-left: 2.5px;
          margin-right: 2.5px;
          text-align: center;
        }
      }
    }
  }
}

.signout_confirm-wrapper {
  padding: calc(15% + 50px) 2% 30%;
  text-align: center;
  form button {
    font-size: 1.5em;
    padding: 8px 15px;
    border: 0px;
    border-radius: 3px;
    margin-top: 15px;
  }
}

.membership-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: row wrap;
  background: var(--card-bg);
  border-radius: 5px;
  border: 1px solid $light-medium-gray;
  padding: 0.5rem 0 0.8rem 0.5rem;

  dt,
  label {
    flex-basis: 40%;
    font-size: 1.1rem;
    font-weight: bold;

    margin-top: 0.3rem;
    padding: 0.2rem;
  }

  dd {
    flex-basis: 40%;
    flex-grow: 1;

    margin-top: 0.3rem;
    padding: 0.2rem;

    .no {
      color: darken($red, 10%);
    }
  }
}

.membership-purchase-link {
  font-size: 2rem;
}

.crayons-notice--danger h3 {
  color: var(--accent-danger-darker);
}
