/////////////////////////////////// Buttons //////////////////////////////////

a.btn {
  position: relative;
  display: inline-block;
  margin: .5rem .25rem .5rem 0;
  padding: 0.85rem 1.5rem;
  color: $article-btn-text !important;
  border-radius: $radius;
  font-size: 1.05rem;
  z-index: 1;
  @include gradient($article-btn-gradient);

  &:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: $radius;
    @include gradient($article-btn-gradient-hover);
    opacity: 0;
    transition: opacity .2s;
    z-index: -1;
  }

  &:hover {
    cursor: pointer;

    &:after {
      opacity: 1;
    }
  }

  &.download:before {
    content: "\e91d";
    font-family: "icomoon-v2";
    margin-right: .5rem;
    font-size: 1.1rem;
  }

  &.github:before {
    content: "\eab0";
    font-family: "icomoon-v2";
    margin-right: .5rem;
    font-size: 1.1rem;
  }

  &.arrow span.CaretOutlineRight {
    font-size: 1.5rem;
    line-height: 0;
    vertical-align: sub;
    display: inline-block;
    margin-right: -.65rem;
  }

  &.small {
    padding: .4rem 1rem;
  }

  &.small-plus {
    padding: .25em;
    line-height: .65rem;
  }
}

///////////////////////////// InfluxDB URL Triggers ////////////////////////////

.select-url {
  margin: -2.5rem 0 1rem;
  text-align: right;
  display: none;
}

.url-trigger {
  padding: .25rem .5rem;
  display: inline-block;
  font-size: .85rem;
  font-style: italic;
  color: rgba($article-tab-code-text, .5);
  background: $article-code-bg;
  border-radius: 0 0 $radius $radius;

  &:before {
    content: "\e924";
    display: inline-block;
    margin-right: .35rem;
    font-family: "icomoon-v2";
    font-style: normal;
    font-size: .8rem;
  }

  &:hover {
    color: $article-tab-code-text;
  }
}
li .url-trigger { padding: 0rem .5rem; }

.code-tab-content {
  .select-url{margin-top: -3.25rem}
}