@import '~scss/variables';
@import '~scss/mixins';

.modalHeader {
  padding: 20px;
  padding-bottom: 0;
  border-bottom: none;
  background-color: #fff;

  :global .kubed-icon-question {
    fill: #ab2f29;
    color: #fff;
  }
}

.modalBody {
  padding: 0;
}

.body {
  padding: 20px;
  margin-top: -8px;
}

.resources {
  padding: 12px;
  border-radius: $border-radius;
  background-color: $card-bg-color;

  .resource {
    padding: 8px 12px;
    border-radius: $border-radius;
    background-color: #fff;
    cursor: pointer;

    &.selected {
      background-color: $dark-color07;

      .resourceName {
        color: #fff;
      }

      .resourceType {
        color: #fff;
      }
    }

    :global .icon {
      margin-left: 12px;
    }

    & + .resource {
      margin-top: 4px;
    }

    &Name {
      margin-left: 8px;
      @include TypographySymbolText;
    }

    &Type {
      margin-left: 8px;
      @include TypographyParagraph($dark-color01);
    }
  }
}

.footer {
  padding: 16px 20px;
  border-radius: 0 0 4px 4px;
  background-color: $lightest;
  text-align: right;

  button {
    margin-left: 10px;
    &:first-of-type {
      margin-left: 0;
    }
  }
}

.empty {
  padding: 40px 15px;
  background-color: $card-bg-color;
  box-shadow: none;
}
