.tab.tab-listing-order {
  border-color: $background;

  .tab-item {
    background-color: $background;
    margin: 4px 2px;
    padding: 0;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    &.active a {
      color: $pink;
      border-color: $pink;
    }

    a {
      @include color-hover($foreground, $cyan);
      margin: 0;
      padding: 4px 8px;
    }
  }
}

.form-select:not([multiple]):not([size]) {
  border: 1px solid $comment;
  background-color: $background;
  // Changes the "from last X period" icon to be the same color as the foreground, it's hardcoded though
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%204%205"%3E%3Cpath%20fill="%23f8f8f2"%20d="M2%200L0%202h4zm0%205L0%203h4z"/%3E%3C/svg%3E');
}

.tab.tab-markdown-mode {
  border-bottom: none;
  margin-bottom: 4px;

  > .tab-item {
    margin-right: 4px;

    &:last-child {
      margin-right: 0;
    }

    &.active > .btn {
      background-color: $pink;
      border-color: $pink;
      color: $background;
    }
  }
}