@import '~scss/variables';

.wrapper,
.empty {
  width: 100%;
  height: 96px;
  border-radius: 4px;
  background-color: #ffffff;
  border: solid 1px $light-color03;
  overflow: hidden;
}

.empty {
  cursor: pointer;
  transition: all $trans-speed ease-in-out;
  &:hover {
    background-color: $light-color03;
  }

  & > p {
    padding: 38px 0;
    text-align: center;
    color: #5f708a;
  }
}

.formWrapper {
  :global .h4 {
    line-height: 1.4;
    margin-bottom: 32px;

    svg {
      width: 24px;
      height: 24px;
      margin-right: 12px;
      vertical-align: sub;
    }
  }
}

.contentWrapper {
  min-height: 336px;
  height: 100%;
  padding: 12px;
  border-radius: 4px;
  background-color: $lightest;
}

.repoTypes {
  margin-bottom: 20px;
  display: flex;
  & > li {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 4px;
    background-color: $light-color03;
    font-family: $font-family-id;
    font-size: $size-medium;
    font-weight: $font-bold;
    line-height: 1.5;
    cursor: pointer;
    flex: 1 1;
    text-align: center;

    :global {
      .icon {
        margin-right: 8px;
      }
    }

    & > span {
      display: inline-block;
      vertical-align: middle;
    }

    & + li {
      margin-left: 12px;
    }

    &.selectType {
      background-color: #242e42;
      color: #ffffff;
    }
  }
}

.gitIcon {
  width: 32px;
  height: 32px;
  padding: 4px;
  vertical-align: middle;
  margin-right: 20px;
}

.light {
  fill: white;
  color: white;
}

.dark {
  fill: #242e42;
  color: #242e42;
}

.branch {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  height: 64px;
  border-radius: 4px;
  background-color: #ffffff;
  border: solid 1px transparent;
  margin-bottom: 8px;
  transition: all $trans-speed ease-in-out;

  &:hover {
    box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.08);
    .action {
      opacity: 1;
    }
  }
  .icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    line-height: 48px;
    margin-right: 20px;

    svg {
      height: 48px;
      width: 48px;
    }
  }
  .info {
    flex: 1 1;
    overflow: hidden;

    .name {
      line-height: 20px;
      font-size: 12px;
      font-weight: bold;
      color: #242e42;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .desc {
      line-height: 20px;
      color: $dark-grey;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .action {
    padding-top: 4px;
    opacity: 0;
    flex-basis: 100px;
    transition: all $trans-speed ease-in-out;
  }
}

.branch__show {
  width: 100%;
  border: none;
  height: 100%;
  padding: 24px 32px;

  &:hover {
    box-shadow: none;
  }
}

.deleteRepoBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
